collabdocchat 2.4.4 → 2.4.6

package/src/pages/user-dashboard.js

@@ -1,1058 +1,1912 @@
-import { ApiService } from '../services/api.js';
-import { AuthService } from '../services/auth.js';
-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> 搜索
+import { ApiService } from '../services/api.js';
+import { AuthService } from '../services/auth.js';
+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 = [];
+
+  // 辅助函数：处理消息内容（白板、投票等特殊格式）
+  function formatMessageContent(content) {
+    // 处理白板作品
+    if (content.startsWith('[白板作品]')) {
+      const imageUrl = content.replace('[白板作品]', '').trim();
+      
+      // 检查是否是文件URL（需要token）
+      const isFileUrl = imageUrl.includes('/api/files/') && imageUrl.includes('/download');
+      
+      // 如果是文件URL但没有token，添加token
+      let finalUrl = imageUrl;
+      if (isFileUrl && !imageUrl.includes('token=')) {
+        const token = localStorage.getItem('token');
+        finalUrl = imageUrl.includes('?') 
+          ? `${imageUrl}&token=${token}` 
+          : `${imageUrl}?token=${token}`;
+      }
+      
+      return `
+        <div style="background: linear-gradient(135deg, rgb(99, 102, 241) 0%, rgb(139, 92, 246) 100%); padding: 16px; border-radius: 12px; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);">
+          <div style="margin-bottom: 12px; font-weight: 600; color: white; display: flex; align-items: center; gap: 6px; font-size: 15px;">
+            <span style="font-size: 18px;">🎨</span>
+            <span>白板作品</span>
+          </div>
+          <div style="position: relative; display: inline-block;">
+            <img src="${finalUrl}" alt="白板作品" 
+              style="max-width: 400px; max-height: 400px; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); background: rgba(255,255,255,0.1);" 
+              onclick="window.open('${finalUrl}', '_blank')"
+              onerror="this.style.display='none'; this.nextElementSibling.style.display='block'; console.error('白板图片加载失败:', '${finalUrl}');"
+              onload="console.log('白板图片加载成功:', '${finalUrl}');">
+            <div style="display: none; padding: 20px; background: rgba(255,255,255,0.1); border: 2px dashed rgba(255,255,255,0.3); border-radius: 8px; text-align: center; color: white;">
+              <div style="font-size: 48px; margin-bottom: 10px;">⚠️</div>
+              <div style="font-weight: 600; margin-bottom: 5px;">图片加载失败</div>
+              <div style="font-size: 12px;">图片可能已被删除或URL无效</div>
+              <button onclick="navigator.clipboard.writeText('${imageUrl}'); alert('图片URL已复制到剪贴板');" style="margin-top: 10px; padding: 6px 12px; background: rgba(255,255,255,0.2); color: white; border: none; border-radius: 6px; cursor: pointer;">复制图片URL</button>
+            </div>
+            <div style="margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.8);">点击图片查看大图</div>
+          </div>
+        </div>
+      `;
+    }
+    
+    // 处理投票
+    if (content.startsWith('[投票]')) {
+      const pollId = content.replace('[投票]', '').trim();
+      return `
+        <div class="poll-card" data-poll-id="${pollId}" style="background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); border: 2px solid rgba(99, 102, 241, 0.3); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.3s;" 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'" onclick="viewPollDetail('${pollId}')">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
+            <span style="font-size: 32px;">📊</span>
+            <div style="flex: 1;">
+              <div style="font-weight: 600; font-size: 16px; color: var(--text-primary); margin-bottom: 4px;">投票</div>
+              <div style="font-size: 13px; color: var(--text-secondary);">点击查看详情并参与投票</div>
+            </div>
+          </div>
+          <div style="padding: 8px 12px; background: rgba(99, 102, 241, 0.1); border-radius: 6px; font-size: 12px; color: var(--primary); text-align: center;">
+            📋 查看投票详情
+          </div>
+        </div>
+      `;
+    }
+    
+    // 普通消息
+    return content;
+  }
+
+  // 全局函数：查看投票详情
+  window.viewPollDetail = async (pollId) => {
+    try {
+      const result = await apiService.getPoll(pollId);
+      const poll = result.poll;
+      
+      const totalVotes = poll.options.reduce((sum, opt) => sum + opt.votes.length, 0);
+      const hasVoted = poll.options.some(opt => opt.votes.includes(currentUserId));
+      const isEnded = poll.status === 'ended' || (poll.endTime && new Date(poll.endTime) < new Date());
+      
+      let optionsHtml = '';
+      poll.options.forEach((option, index) => {
+        const percentage = totalVotes > 0 ? (option.votes.length / totalVotes * 100).toFixed(1) : 0;
+        const isSelected = option.votes.includes(currentUserId);
+        
+        optionsHtml += `
+          <div class="poll-option" style="margin-bottom: 12px; padding: 12px; background: var(--bg-tertiary); border-radius: 8px; border: 2px solid ${isSelected ? 'var(--primary)' : 'var(--border)'};">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <span style="font-weight: 500; color: var(--text-primary);">${option.text}</span>
+                ${isSelected ? '<span style="color: var(--primary); font-size: 12px;">✓ 已投票</span>' : ''}
+              </div>
+              <span style="font-weight: 600; color: var(--primary);">${option.votes.length} 票 (${percentage}%)</span>
+            </div>
+            <div style="height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden;">
+              <div style="height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%); width: ${percentage}%; transition: width 0.3s;"></div>
+            </div>
+            ${!poll.anonymous && option.votes.length > 0 ? `
+              <div style="margin-top: 8px; font-size: 12px; color: var(--text-secondary);">
+                投票者: ${option.voterNames ? option.voterNames.join(', ') : ''}
+              </div>
+            ` : ''}
+          </div>
+        `;
+      });
+      
+      const modalHtml = `
+        <div id="pollDetailModal" class="modal" style="display: flex;">
+          <div class="modal-content" style="max-width: 700px; max-height: 90vh; overflow-y: auto;">
+            <div class="modal-header">
+              <h3>📊 投票详情</h3>
+              <button class="modal-close" id="closePollDetailModal">&times;</button>
+            </div>
+            <div class="modal-body" style="padding: 24px;">
+              <div style="margin-bottom: 24px;">
+                <h2 style="margin: 0 0 12px 0; color: var(--text-primary);">${poll.title}</h2>
+                ${poll.description ? `<p style="color: var(--text-secondary); margin: 0 0 16px 0;">${poll.description}</p>` : ''}
+                
+                <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;">
+                  <span style="font-size: 13px; padding: 6px 12px; background: var(--bg-tertiary); border-radius: 14px; color: var(--text-secondary);">
+                    ${poll.allowMultiple ? '✓ 多选投票' : '○ 单选投票'}
+                  </span>
+                  <span style="font-size: 13px; padding: 6px 12px; background: var(--bg-tertiary); border-radius: 14px; color: var(--text-secondary);">
+                    ${poll.anonymous ? '🔒 匿名投票' : '👤 实名投票'}
+                  </span>
+                  ${isEnded ? '<span style="font-size: 13px; padding: 6px 12px; background: var(--danger); border-radius: 14px; color: white;">已结束</span>' : '<span style="font-size: 13px; padding: 6px 12px; background: var(--success); border-radius: 14px; color: white;">进行中</span>'}
+                </div>
+                
+                <div style="padding: 16px; background: var(--bg-secondary); border-radius: 12px; border-left: 4px solid var(--primary); margin-bottom: 24px;">
+                  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
+                    <div>
+                      <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;">创建者</div>
+                      <div style="font-weight: 600; color: var(--text-primary);">👤 ${poll.creatorName}</div>
+                    </div>
+                    <div>
+                      <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;">总投票数</div>
+                      <div style="font-weight: 600; color: var(--primary);">👥 ${totalVotes} 人</div>
+                    </div>
+                    <div>
+                      <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;">创建时间</div>
+                      <div style="font-weight: 600; color: var(--text-primary);">⏰ ${new Date(poll.createdAt).toLocaleString('zh-CN')}</div>
+                    </div>
+                    ${poll.endTime ? `
+                      <div>
+                        <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;">截止时间</div>
+                        <div style="font-weight: 600; color: var(--text-primary);">⏰ ${new Date(poll.endTime).toLocaleString('zh-CN')}</div>
+                      </div>
+                    ` : ''}
+                  </div>
+                </div>
+              </div>
+              
+              <div style="margin-bottom: 24px;">
+                <h3 style="margin-bottom: 16px; color: var(--text-primary);">投票选项</h3>
+                ${!isEnded && !hasVoted ? `
+                  <form id="voteForm">
+                    ${poll.options.map((option, index) => {
+                      const percentage = totalVotes > 0 ? (option.votes.length / totalVotes * 100).toFixed(1) : 0;
+                      return `
+                        <div class="poll-option" style="margin-bottom: 12px; padding: 12px; background: var(--bg-tertiary); border-radius: 8px; border: 2px solid var(--border); cursor: pointer;" onmouseover="this.style.borderColor='var(--primary)'" onmouseout="this.style.borderColor='var(--border)'">
+                          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+                            <div style="display: flex; align-items: center; gap: 8px;">
+                              <input type="${poll.allowMultiple ? 'checkbox' : 'radio'}" name="poll-option" value="${index}" style="width: 18px; height: 18px; cursor: pointer;">
+                              <span style="font-weight: 500; color: var(--text-primary);">${option.text}</span>
+                            </div>
+                            <span style="font-weight: 600; color: var(--primary);">${option.votes.length} 票 (${percentage}%)</span>
+                          </div>
+                          <div style="height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden;">
+                            <div style="height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%); width: ${percentage}%; transition: width 0.3s;"></div>
+                          </div>
+                        </div>
+                      `;
+                    }).join('')}
+                    <button type="submit" class="btn-primary" style="width: 100%; padding: 12px; margin-top: 16px;">提交投票</button>
+                    <div style="text-align: center; color: var(--warning); margin-top: 12px; font-size: 13px;">⚠️ 提交后不可修改</div>
+                  </form>
+                ` : optionsHtml}
+                ${hasVoted ? '<div style="text-align: center; color: var(--success); margin-top: 16px; padding: 12px; background: rgba(34, 197, 94, 0.1); border-radius: 8px; font-weight: 600;">✓ 您已参与投票，投票后不可修改</div>' : ''}
+                ${isEnded ? '<div style="text-align: center; color: var(--text-secondary); margin-top: 16px; padding: 12px; background: var(--bg-tertiary); border-radius: 8px;">投票已结束</div>' : ''}
+              </div>
+              
+              <div style="display: flex; gap: 10px;">
+                <button class="btn-secondary" id="closePollDetailBtn" style="flex: 1;">关闭</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+      
+      // 移除旧的模态框
+      const oldModal = document.getElementById('pollDetailModal');
+      if (oldModal) oldModal.remove();
+      
+      // 添加新模态框
+      document.body.insertAdjacentHTML('beforeend', modalHtml);
+      
+      // 绑定事件
+      document.getElementById('closePollDetailModal').addEventListener('click', () => {
+        document.getElementById('pollDetailModal').remove();
+      });
+      
+      document.getElementById('closePollDetailBtn').addEventListener('click', () => {
+        document.getElementById('pollDetailModal').remove();
+      });
+      
+      // 投票表单提交
+      const voteForm = document.getElementById('voteForm');
+      if (voteForm && !isEnded && !hasVoted) {
+        voteForm.addEventListener('submit', async (e) => {
+          e.preventDefault();
+          
+          const selectedOptions = Array.from(document.querySelectorAll('input[name="poll-option"]:checked'))
+            .map(input => parseInt(input.value));
+          
+          if (selectedOptions.length === 0) {
+            alert('请选择至少一个选项！');
+            return;
+          }
+          
+          try {
+            await apiService.vote(pollId, selectedOptions);
+            alert('投票成功！');
+            document.getElementById('pollDetailModal').remove();
+            // 刷新当前视图以更新投票状态
+            const activeView = document.querySelector('.nav-item.active');
+            if (activeView && activeView.dataset.view === 'tasks') {
+              const contentArea = document.getElementById('contentArea');
+              await renderTasksView(contentArea);
+            }
+          } catch (error) {
+            console.error('投票失败:', error);
+            alert('投票失败：' + error.message);
+          }
+        });
+      }
+      
+    } catch (error) {
+      console.error('加载投票详情失败:', error);
+      alert('加载投票详情失败：' + error.message);
+    }
+  };
+
+  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>
           <button class="nav-item" data-view="knowledge">
             <span class="icon">📚</span> 知识库
           </button>
-          <button class="nav-item" data-view="ai">
-            <span class="icon">🤖</span> AI助手
-          </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);
+        </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;
       case 'knowledge':
         await renderKnowledgeView(contentArea);
         break;
-      case 'ai':
-        await renderAIView(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;
-  }
-
-
-  // 知识库（用户版）
-  async function renderKnowledgeView(container) {
+    }
+  }
+
+  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();
+      
+      // 获取用户所在群组的投票
+      let polls = [];
+      try {
+        const groupsResult = await apiService.getGroups();
+        const myGroups = groupsResult.groups;
+        
+        // 获取所有群组的投票
+        for (const group of myGroups) {
+          try {
+            const pollsResult = await apiService.getGroupPolls(group._id);
+            if (pollsResult.polls && Array.isArray(pollsResult.polls)) {
+              polls = polls.concat(pollsResult.polls.map(poll => ({
+                ...poll,
+                groupName: group.name
+              })));
+            }
+          } catch (err) {
+            console.error(`获取群组 ${group.name} 的投票失败:`, err);
+          }
+        }
+      } catch (err) {
+        console.error('获取投票失败:', err);
+      }
+      
+      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 && polls.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);
+      });
+
+      // 渲染投票任务
+      polls.forEach(poll => {
+        const totalVotes = poll.options.reduce((sum, opt) => sum + opt.votes.length, 0);
+        const hasVoted = poll.options.some(opt => opt.votes.includes(currentUserId));
+        const isEnded = poll.status === 'ended' || (poll.endTime && new Date(poll.endTime) < new Date());
+        
+        const pollCard = document.createElement('div');
+        pollCard.className = 'task-card poll-task';
+        pollCard.style.cssText = 'background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%); border-left: 4px solid var(--primary);';
+        pollCard.innerHTML = `
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
+            <span style="font-size: 32px;">📊</span>
+            <h3 style="margin: 0;">${poll.title}</h3>
+          </div>
+          <p>${poll.description || '暂无描述'}</p>
+          <div class="task-meta">
+            <span class="status-badge" style="background: ${isEnded ? 'var(--danger)' : 'var(--success)'};">${isEnded ? '已结束' : '进行中'}</span>
+            <span>群组: ${poll.groupName}</span>
+            <span>👥 ${totalVotes} 人投票</span>
+            ${hasVoted ? '<span style="color: var(--success);">✓ 已投票</span>' : '<span style="color: var(--warning);">⏳ 待投票</span>'}
+          </div>
+          <div class="task-actions">
+            <button class="btn-primary btn-sm" data-poll-id="${poll._id}" data-action="view-poll">查看详情</button>
+          </div>
+        `;
+        tasksList.appendChild(pollCard);
+      });
+
+      // 任务操作
+      document.querySelectorAll('[data-action="start"], [data-action="complete"]').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);
+          }
+        });
+      });
+
+      // 投票查看操作
+      document.querySelectorAll('[data-action="view-poll"]').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const pollId = btn.dataset.pollId;
+          window.viewPollDetail(pollId);
+        });
+      });
+    } 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;
     }
 
-    try {
-      const token = localStorage.getItem('token');
-      const response = await fetch(`http://localhost:8765/api/knowledge/group/${currentGroup._id}`, {
-        headers: { 'Authorization': `Bearer ${token}` }
+    const result = await 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);
       });
-      const result = await response.json();
-      const knowledgeItems = result.data || [];
+    });
+  }
+
+  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>
-          <input type="text" id="knowledgeSearch" placeholder="搜索知识..." style="padding: 8px; border: 1px solid var(--border); border-radius: 4px;">
+          <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>
-        <div class="knowledge-list" id="knowledgeList"></div>
       `;
 
-      const knowledgeList = document.getElementById('knowledgeList');
-      if (knowledgeItems.length === 0) {
-        knowledgeList.innerHTML = '<div class="empty-state">暂无知识条目</div>';
+      const filesList = document.getElementById('filesList');
+      
+      if (!result.files || result.files.length === 0) {
+        filesList.innerHTML = '<div class="empty-state">暂无文件</div>';
       } else {
-        const renderItems = (items) => {
-          knowledgeList.innerHTML = items.map(item => `
-            <div class="knowledge-card">
-              <h3>${item.title}</h3>
-              <p>${item.content}</p>
-              <div class="knowledge-meta">
-                <span>创建者: ${item.creator?.username || '未知'}</span>
-                <span>创建时间: ${new Date(item.createdAt).toLocaleDateString()}</span>
+        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>
-              ${item.tags && item.tags.length > 0 ? `
-                <div class="tags">
-                  ${item.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
-                </div>
-              ` : ''}
+              ${file.description ? `<p class="file-description">${file.description}</p>` : ''}
             </div>
-          `).join('');
-        };
+            <div class="file-actions">
+              <a href="${apiService.getFileDownloadUrl(file._id)}" class="btn-primary" download>下载</a>
+              ${String(file.uploader._id) === String(currentUserId) ? `<button class="btn-danger" data-id="${file._id}" data-action="delete-file">删除</button>` : ''}
+            </div>
+          `;
+          filesList.appendChild(fileCard);
+        });
 
-        renderItems(knowledgeItems);
-
-        // 搜索功能
-        document.getElementById('knowledgeSearch').addEventListener('input', (e) => {
-          const query = e.target.value.toLowerCase();
-          const filtered = knowledgeItems.filter(item =>
-            item.title.toLowerCase().includes(query) ||
-            item.content.toLowerCase().includes(query) ||
-            (item.tags && item.tags.some(tag => tag.toLowerCase().includes(query)))
-          );
-          renderItems(filtered);
+        // 删除文件事件
+        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) {
-      container.innerHTML = `<div class="empty-state">加载失败: ${error.message}</div>`;
+      console.error('获取文件列表失败:', error);
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>文件共享</h2>
+        </div>
+        <div class="empty-state">加载文件失败: ${error.message}</div>
+      `;
     }
   }
 
-  // AI助手（用户版）
-  async function renderAIView(container) {
+  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" style="text-align: center; padding: 60px 20px; background: var(--bg-secondary); border-radius: 16px; border: 2px dashed var(--border);">
+          <div style="font-size: 64px; margin-bottom: 20px;">💬</div>
+          <h3 style="font-size: 24px; margin-bottom: 12px; color: var(--text-primary);">群聊</h3>
+          <p style="color: var(--text-secondary); margin-bottom: 24px; font-size: 16px;">请先在"我的群组"中选择一个群组</p>
+          <button class="btn-primary" onclick="document.querySelector('[data-view=\\"groups\\"]').click()" style="padding: 12px 32px; font-size: 16px;">
+            前往我的群组
+          </button>
+        </div>
+      `;
+      return;
+    }
+
+    try {
+    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>🤖 AI助手</h2>
+        <div class="view-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 12px; margin-bottom: 20px;">
+          <h2 style="margin: 0; display: flex; align-items: center; gap: 12px;">
+            <span style="font-size: 32px;">💬</span>
+            <span>群聊 - ${currentGroup.name}</span>
+          </h2>
+          ${!canSpeak ? `
+            <div style="margin-top: 12px; padding: 12px; background: rgba(255,255,255,0.2); border-radius: 8px; font-size: 14px;">
+              ⚠️ ${isMutedAll ? '全体禁言中，无法发言' : '你已被禁言'}
       </div>
-      <div class="ai-container">
-        <div class="ai-chat" id="aiChat">
-          <div class="ai-message ai">
-            <p>你好！我是AI助手，有什么可以帮助你的吗？</p>
-            <p>你可以问我关于文档、任务、群组的问题。</p>
+          ` : ''}
+        </div>
+        
+        <!-- 标签页切换 -->
+        <div class="chat-tabs" style="display: flex; gap: 8px; margin-bottom: 16px; background: var(--bg-secondary); padding: 8px; border-radius: 12px;">
+          <button class="chat-tab active" data-tab="chat" style="flex: 1; padding: 12px 20px; background: var(--primary); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s;">
+            💬 聊天
+          </button>
+          <button class="chat-tab" data-tab="whiteboard" style="flex: 1; padding: 12px 20px; background: transparent; color: var(--text-primary); border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s;">
+            🎨 白板
+          </button>
+          <button class="chat-tab" data-tab="ai" style="flex: 1; padding: 12px 20px; background: transparent; color: var(--text-primary); border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s;">
+            🤖 AI助手
+          </button>
+        </div>
+        
+        <!-- 聊天内容 -->
+        <div class="tab-content active" data-content="chat">
+          <div class="chat-container" style="display: flex; flex-direction: column; height: calc(100vh - 350px); background: var(--bg-secondary); border-radius: 12px; overflow: hidden;">
+            <div class="messages" id="messages" style="flex: 1; overflow-y: auto; padding: 20px;"></div>
+            <div class="chat-input" style="display: flex; gap: 10px; padding: 16px; background: var(--bg-tertiary); border-top: 1px solid var(--border);">
+              <button class="btn-emoji" id="emojiBtn" ${canSpeak ? '' : 'disabled'} style="padding: 10px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; cursor: ${canSpeak ? 'pointer' : 'not-allowed'}; font-size: 20px;">😊</button>
+              <input type="text" id="messageInput" placeholder="${canSpeak ? '输入消息...' : (isMutedAll ? '全体禁言中，无法发言' : '你已被禁言')}" ${canSpeak ? '' : 'disabled'} style="flex: 1; padding: 10px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary);">
+              <button class="btn-primary" id="sendBtn" ${canSpeak ? '' : 'disabled'} style="padding: 10px 24px; border-radius: 8px; cursor: ${canSpeak ? 'pointer' : 'not-allowed'};">发送</button>
+            </div>
+            <emoji-picker id="emojiPicker" class="hidden" style="position: absolute; bottom: 80px; left: 20px; z-index: 1000;"></emoji-picker>
           </div>
         </div>
-        <div class="ai-input">
-          <textarea id="aiInput" placeholder="向AI助手提问..." rows="3"></textarea>
-          <button class="btn-primary" id="aiSendBtn">发送</button>
+        
+        <!-- 白板内容 -->
+        <div class="tab-content" data-content="whiteboard" style="display: none;">
+          <div class="whiteboard-container" style="background: var(--bg-secondary); border-radius: 12px; padding: 16px; height: calc(100vh - 350px);">
+            <div class="whiteboard-toolbar" style="display: flex; gap: 10px; margin-bottom: 16px; padding: 12px; background: var(--bg-tertiary); border-radius: 8px;">
+              <button class="tool-btn active" data-tool="pen" style="padding: 8px 16px; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer;">✏️ 画笔</button>
+              <button class="tool-btn" data-tool="eraser" style="padding: 8px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; cursor: pointer;">🧹 橡皮</button>
+              <input type="color" id="colorPicker" value="#667eea" style="width: 50px; height: 36px; border: none; border-radius: 6px; cursor: pointer;">
+              <input type="range" id="brushSize" min="1" max="20" value="3" style="width: 120px;">
+              <button class="btn-secondary" id="clearCanvas" style="padding: 8px 16px; border-radius: 6px;">🗑️ 清空</button>
+              <button class="btn-primary" id="sendWhiteboardBtn" style="padding: 8px 16px; border-radius: 6px; background: var(--success); border: none; color: white; cursor: pointer;">📤 发送到群聊</button>
+            </div>
+            <canvas id="whiteboard" style="width: 100%; height: calc(100% - 80px); background: white; border-radius: 8px; cursor: crosshair;"></canvas>
+          </div>
         </div>
+        
+        <!-- AI助手内容 -->
+        <div class="tab-content" data-content="ai" style="display: none;">
+          <div class="ai-container" style="display: flex; flex-direction: column; height: calc(100vh - 350px); background: var(--bg-secondary); border-radius: 12px; overflow: hidden;">
+            <div class="ai-chat" id="aiChat" style="flex: 1; overflow-y: auto; padding: 20px;">
+              <div class="ai-message ai" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 16px; border-radius: 12px; margin-bottom: 16px;">
+                <p style="margin: 0 0 8px 0; font-weight: 600;">🤖 AI助手</p>
+                <p style="margin: 0;">你好！我是AI助手，有什么可以帮助你的吗？</p>
+                <p style="margin: 8px 0 0 0; font-size: 14px; opacity: 0.9;">你可以问我关于文档、任务、群组的问题。</p>
+              </div>
+            </div>
+            <div class="ai-input" style="display: flex; gap: 10px; padding: 16px; background: var(--bg-tertiary); border-top: 1px solid var(--border);">
+              <textarea id="aiInput" placeholder="向AI助手提问..." rows="2" style="flex: 1; padding: 10px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary); resize: none;"></textarea>
+              <button class="btn-primary" id="aiSendBtn" style="padding: 10px 24px; border-radius: 8px; align-self: flex-end;">发送</button>
+            </div>
+          </div>
       </div>
     `;
 
-    const aiChat = document.getElementById('aiChat');
-    const aiInput = document.getElementById('aiInput');
-    const aiSendBtn = document.getElementById('aiSendBtn');
+    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 && Array.isArray(messagesResult.messages)) {
+          if (messagesResult.messages.length === 0) {
+            messagesDiv.innerHTML = `
+              <div style="text-align: center; padding: 40px; color: var(--text-tertiary);">
+                <div style="font-size: 48px; margin-bottom: 16px;">💬</div>
+                <p>还没有消息，开始聊天吧！</p>
+              </div>
+            `;
+          } else {
+        messagesResult.messages.forEach(msg => {
+          const messageEl = document.createElement('div');
+              const isOwn = String(msg.sender) === String(currentUserId) || msg.username === user.username;
+              
+          // 格式化消息内容（处理白板、投票等）
+          const formattedContent = formatMessageContent(msg.content);
+          const isSpecialMessage = msg.content.startsWith('[白板作品]') || msg.content.startsWith('[投票]');
+          const isWhiteboard = msg.content.startsWith('[白板作品]');
+          
+              messageEl.className = `message ${isOwn ? 'own' : ''}`;
+              messageEl.style.cssText = `
+                margin-bottom: 16px;
+                display: flex;
+                flex-direction: column;
+                align-items: ${isOwn ? 'flex-end' : 'flex-start'};
+              `;
+          
+          messageEl.innerHTML = `
+                <div class="message-header" style="display: flex; gap: 8px; margin-bottom: 4px; font-size: 12px; color: var(--text-tertiary);">
+              <span class="message-user">${msg.username}</span>
+                  <span class="message-time">${new Date(msg.timestamp).toLocaleTimeString('zh-CN')}</span>
+            </div>
+                <div class="message-content" style="background: ${isWhiteboard ? 'transparent' : (isSpecialMessage ? 'transparent' : (isOwn ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'var(--bg-tertiary)'))}; color: ${isOwn && !isSpecialMessage ? 'white' : 'var(--text-primary)'}; padding: ${isSpecialMessage ? '0' : '12px 16px'}; border-radius: 16px; max-width: ${isSpecialMessage ? '90%' : '70%'}; word-wrap: break-word; box-shadow: ${isOwn && !isSpecialMessage ? '0 4px 12px rgba(102, 126, 234, 0.3)' : '0 2px 8px rgba(0,0,0,0.05)'};">${formattedContent}</div>
+          `;
+          messagesDiv.appendChild(messageEl);
+        });
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+          }
+      }
+    } catch (err) {
+      console.error('加载历史消息失败:', err);
+        messagesDiv.innerHTML = `
+          <div style="text-align: center; padding: 40px; color: var(--danger);">
+            <div style="font-size: 48px; margin-bottom: 16px;">⚠️</div>
+            <p>加载历史消息失败</p>
+            <p style="font-size: 14px; color: var(--text-tertiary);">${err.message}</p>
+          </div>
+        `;
+    }
+
+    // 表情包功能
+    const emojiBtn = document.getElementById('emojiBtn');
+    const emojiPicker = document.getElementById('emojiPicker');
+    
+      if (canSpeak) {
+    emojiBtn.addEventListener('click', () => {
+      emojiPicker.classList.toggle('hidden');
+    });
 
-    const sendMessage = async () => {
-      const question = aiInput.value.trim();
-      if (!question) return;
+    emojiPicker.addEventListener('emoji-click', (event) => {
+      messageInput.value += event.detail.unicode;
+      messageInput.focus();
+      emojiPicker.classList.add('hidden');
+    });
 
-      // 显示用户消息
-      const userMsg = document.createElement('div');
-      userMsg.className = 'ai-message user';
-      userMsg.textContent = question;
-      aiChat.appendChild(userMsg);
-      aiInput.value = '';
+    // 点击外部关闭表情选择器
+    document.addEventListener('click', (e) => {
+      if (!emojiBtn.contains(e.target) && !emojiPicker.contains(e.target)) {
+        emojiPicker.classList.add('hidden');
+      }
+    });
+      }
 
-      // 显示加载中
-      const loadingMsg = document.createElement('div');
-      loadingMsg.className = 'ai-message ai loading';
-      loadingMsg.textContent = '思考中...';
-      aiChat.appendChild(loadingMsg);
-      aiChat.scrollTop = aiChat.scrollHeight;
+    // 消息通知系统
+    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'
+        });
+      }
+    }
 
-      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 })
+    // 请求通知权限
+    if ('Notification' in window && Notification.permission === 'default') {
+      Notification.requestPermission();
+    }
+
+    // 监听消息
+    wsService.on('chat_message', (data) => {
+      if (data.groupId === currentGroup._id) {
+        const messageEl = document.createElement('div');
+          const isOwn = String(data.userId) === String(currentUserId) || data.username === user.username;
+          messageEl.className = `message ${isOwn ? 'own' : ''}`;
+          messageEl.style.cssText = `
+            margin-bottom: 16px;
+            display: flex;
+            flex-direction: column;
+            align-items: ${isOwn ? 'flex-end' : 'flex-start'};
+          `;
+        
+        // 格式化消息内容（处理白板、投票等）
+        const formattedContent = formatMessageContent(data.content);
+        const isSpecialMessage = data.content.startsWith('[白板作品]') || data.content.startsWith('[投票]');
+        const isWhiteboard = data.content.startsWith('[白板作品]');
+        
+        messageEl.innerHTML = `
+            <div class="message-header" style="display: flex; gap: 8px; margin-bottom: 4px; font-size: 12px; color: var(--text-tertiary);">
+            <span class="message-user">${data.username}</span>
+              <span class="message-time">${new Date(data.timestamp).toLocaleTimeString('zh-CN')}</span>
+          </div>
+            <div class="message-content" style="background: ${isWhiteboard ? 'transparent' : (isSpecialMessage ? 'transparent' : (isOwn ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'var(--bg-tertiary)'))}; color: ${isOwn && !isSpecialMessage ? 'white' : 'var(--text-primary)'}; padding: ${isSpecialMessage ? '0' : '12px 16px'}; border-radius: 16px; max-width: ${isSpecialMessage ? '90%' : '70%'}; word-wrap: break-word; box-shadow: ${isOwn && !isSpecialMessage ? '0 4px 12px rgba(102, 126, 234, 0.3)' : '0 2px 8px rgba(0,0,0,0.05)'};">${formattedContent}</div>
+        `;
+        messagesDiv.appendChild(messageEl);
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+
+        // 显示通知（如果不是自己发送的消息）
+          if (!isOwn) {
+          showNotification(`${data.username} 在 ${currentGroup.name}`, data.content.startsWith('[') ? '发送了特殊消息' : data.content);
+        }
+      }
+    });
+
+    // 服务端拦截提示（比如被禁言/未加入群组）
+    wsService.on('chat_blocked', (data) => {
+      if (data.groupId === currentGroup._id) {
+        const notificationEl = document.createElement('div');
+          notificationEl.style.cssText = `
+            text-align: center;
+            padding: 12px;
+            margin: 16px auto;
+            background: var(--danger);
+            color: white;
+            border-radius: 8px;
+            max-width: 80%;
+          `;
+        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.style.cssText = `
+            text-align: center;
+            padding: 12px;
+            margin: 16px auto;
+            background: var(--success);
+            color: white;
+            border-radius: 8px;
+            max-width: 80%;
+          `;
+        notificationEl.textContent = `${data.username} 已响应点名`;
+        messagesDiv.appendChild(notificationEl);
+          messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      }
+    });
+
+    // 发送消息
+    const sendMessage = () => {
+        if (!canSpeak) {
+          alert(isMutedAll ? '全体禁言中，无法发言' : '你已被禁言');
+          return;
+        }
+        
+      const content = messageInput.value.trim();
+      if (content) {
+          try {
+        wsService.sendChatMessage(currentGroup._id, user.username, content);
+        messageInput.value = '';
+          } catch (error) {
+            console.error('发送消息失败:', error);
+            alert('发送失败: ' + error.message);
+          }
+      }
+    };
+
+      if (canSpeak) {
+    sendBtn.addEventListener('click', sendMessage);
+    messageInput.addEventListener('keypress', (e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+          }
+        });
+      }
+      
+      // 标签页切换功能
+      const tabs = document.querySelectorAll('.chat-tab');
+      const tabContents = document.querySelectorAll('.tab-content');
+      
+      tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+          const targetTab = tab.dataset.tab;
+          
+          // 更新标签样式
+          tabs.forEach(t => {
+            if (t.dataset.tab === targetTab) {
+              t.style.background = 'var(--primary)';
+              t.style.color = 'white';
+            } else {
+              t.style.background = 'transparent';
+              t.style.color = 'var(--text-primary)';
+            }
+          });
+          
+          // 切换内容
+          tabContents.forEach(content => {
+            if (content.dataset.content === targetTab) {
+              content.style.display = 'block';
+            } else {
+              content.style.display = 'none';
+            }
+          });
+          
+          // 初始化白板
+          if (targetTab === 'whiteboard') {
+            initWhiteboard();
+          }
+        });
+      });
+      
+      // 白板功能
+      function initWhiteboard() {
+        const canvas = document.getElementById('whiteboard');
+        if (!canvas || canvas.dataset.initialized) return;
+        
+        canvas.dataset.initialized = 'true';
+        const ctx = canvas.getContext('2d');
+        
+        // 设置画布大小
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        
+        let isDrawing = false;
+        let currentTool = 'pen';
+        let currentColor = '#667eea';
+        let brushSize = 3;
+        
+        // 工具按钮
+        document.querySelectorAll('.tool-btn').forEach(btn => {
+          btn.addEventListener('click', () => {
+            currentTool = btn.dataset.tool;
+            document.querySelectorAll('.tool-btn').forEach(b => {
+              b.style.background = 'var(--bg-secondary)';
+              b.style.color = 'var(--text-primary)';
+              b.style.border = '1px solid var(--border)';
+            });
+            btn.style.background = 'var(--primary)';
+            btn.style.color = 'white';
+            btn.style.border = 'none';
+          });
+        });
+        
+        // 颜色选择器
+        document.getElementById('colorPicker').addEventListener('change', (e) => {
+          currentColor = e.target.value;
+        });
+        
+        // 画笔大小
+        document.getElementById('brushSize').addEventListener('input', (e) => {
+          brushSize = e.target.value;
+        });
+        
+        // 清空画布
+        document.getElementById('clearCanvas').addEventListener('click', () => {
+          if (confirm('确定要清空画布吗？')) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            wsService.sendWhiteboardClear(currentGroup._id);
+          }
+        });
+        
+        // 发送到群聊
+        document.getElementById('sendWhiteboardBtn').addEventListener('click', async () => {
+          try {
+            // 获取Base64图片数据
+            const dataURL = canvas.toDataURL('image/png');
+            
+            // 检查画布是否为空
+            const emptyCanvas = document.createElement('canvas');
+            emptyCanvas.width = canvas.width;
+            emptyCanvas.height = canvas.height;
+            const emptyDataURL = emptyCanvas.toDataURL('image/png');
+            
+            if (dataURL === emptyDataURL) {
+              alert('画布是空的，请先绘制内容！');
+              return;
+            }
+            
+            // 方案1: 直接发送Base64（适合小图片）
+            // 如果图片大小不超过1MB，直接发送Base64
+            const base64Size = dataURL.length * 0.75 / 1024 / 1024; // 转换为MB
+            
+            if (base64Size < 1) {
+              // 直接发送Base64
+              wsService.sendChatMessage(currentGroup._id, user.username, `[白板作品]${dataURL}`);
+              alert('白板作品已发送到群聊！');
+            } else {
+              // 方案2: 上传到服务器（适合大图片）
+              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('白板作品已发送到群聊！');
+              } else {
+                throw new Error('上传失败');
+              }
+            }
+          } catch (error) {
+            console.error('发送白板失败:', error);
+            alert('发送失败，请重试！');
+          }
+        });
+        
+        // 绘图事件
+        canvas.addEventListener('mousedown', (e) => {
+          isDrawing = true;
+          const rect = canvas.getBoundingClientRect();
+          const x = e.clientX - rect.left;
+          const y = e.clientY - rect.top;
+          
+          ctx.beginPath();
+          ctx.moveTo(x, y);
+        });
+        
+        canvas.addEventListener('mousemove', (e) => {
+          if (!isDrawing) return;
+          
+          const rect = canvas.getBoundingClientRect();
+          const x = e.clientX - rect.left;
+          const y = e.clientY - rect.top;
+          
+          ctx.lineWidth = brushSize;
+          ctx.lineCap = 'round';
+          
+          if (currentTool === 'pen') {
+            ctx.strokeStyle = currentColor;
+            ctx.globalCompositeOperation = 'source-over';
+          } else if (currentTool === 'eraser') {
+            ctx.globalCompositeOperation = 'destination-out';
+          }
+          
+          ctx.lineTo(x, y);
+          ctx.stroke();
+          
+          // 发送绘图数据到其他用户
+          wsService.sendWhiteboardDraw(currentGroup._id, {
+            tool: currentTool,
+            color: currentColor,
+            size: brushSize,
+            x: x,
+            y: y
+          });
+        });
+        
+        canvas.addEventListener('mouseup', () => {
+          isDrawing = false;
+        });
+        
+        canvas.addEventListener('mouseleave', () => {
+          isDrawing = false;
         });
-        const result = await response.json();
+        
+        // 监听其他用户的绘图
+        wsService.on('whiteboard_draw', (data) => {
+          if (data.groupId === currentGroup._id) {
+            ctx.lineWidth = data.size;
+            ctx.lineCap = 'round';
+            
+            if (data.tool === 'pen') {
+              ctx.strokeStyle = data.color;
+              ctx.globalCompositeOperation = 'source-over';
+            } else if (data.tool === 'eraser') {
+              ctx.globalCompositeOperation = 'destination-out';
+            }
+            
+            ctx.lineTo(data.x, data.y);
+            ctx.stroke();
+          }
+        });
+        
+        // 监听清空画布
+        wsService.on('whiteboard_clear', (data) => {
+          if (data.groupId === currentGroup._id) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+          }
+        });
+      }
+      
+      // AI助手功能
+      const aiChat = document.getElementById('aiChat');
+      const aiInput = document.getElementById('aiInput');
+      const aiSendBtn = document.getElementById('aiSendBtn');
 
-        loadingMsg.remove();
-        const aiMsg = document.createElement('div');
-        aiMsg.className = 'ai-message ai';
-        aiMsg.textContent = result.answer || '抱歉，我无法回答这个问题。';
-        aiChat.appendChild(aiMsg);
+      const sendAIMessage = async () => {
+        const question = aiInput.value.trim();
+        if (!question) return;
+
+        // 显示用户消息
+        const userMsg = document.createElement('div');
+        userMsg.style.cssText = `
+          background: var(--primary);
+          color: white;
+          padding: 12px 16px;
+          border-radius: 12px;
+          margin-bottom: 16px;
+          max-width: 80%;
+          margin-left: auto;
+          word-wrap: break-word;
+        `;
+        userMsg.textContent = question;
+        aiChat.appendChild(userMsg);
+        aiInput.value = '';
+
+        // 显示加载中
+        const loadingMsg = document.createElement('div');
+        loadingMsg.style.cssText = `
+          background: var(--bg-tertiary);
+          color: var(--text-secondary);
+          padding: 12px 16px;
+          border-radius: 12px;
+          margin-bottom: 16px;
+          max-width: 80%;
+          font-style: italic;
+        `;
+        loadingMsg.textContent = '🤔 思考中...';
+        aiChat.appendChild(loadingMsg);
         aiChat.scrollTop = aiChat.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.style.cssText = `
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+            padding: 12px 16px;
+            border-radius: 12px;
+            margin-bottom: 16px;
+            max-width: 80%;
+            line-height: 1.6;
+            word-wrap: break-word;
+          `;
+          aiMsg.textContent = result.answer || '抱歉，我无法回答这个问题。';
+          aiChat.appendChild(aiMsg);
+          aiChat.scrollTop = aiChat.scrollHeight;
+        } catch (error) {
+          loadingMsg.remove();
+          const errorMsg = document.createElement('div');
+          errorMsg.style.cssText = `
+            background: var(--danger);
+            color: white;
+            padding: 12px 16px;
+            border-radius: 12px;
+            margin-bottom: 16px;
+            max-width: 80%;
+          `;
+          errorMsg.textContent = '抱歉，发生了错误: ' + error.message;
+          aiChat.appendChild(errorMsg);
+          aiChat.scrollTop = aiChat.scrollHeight;
+        }
+      };
+
+      aiSendBtn.addEventListener('click', sendAIMessage);
+      aiInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendAIMessage();
+        }
+      });
+      
+    } catch (error) {
+      console.error('加载群聊失败:', error);
+      container.innerHTML = `
+        <div class="empty-state" style="text-align: center; padding: 60px 20px;">
+          <div style="font-size: 64px; margin-bottom: 20px;">⚠️</div>
+          <h3 style="font-size: 24px; margin-bottom: 12px; color: var(--danger);">加载失败</h3>
+          <p style="color: var(--text-secondary); margin-bottom: 24px;">${error.message}</p>
+          <button class="btn-primary" onclick="location.reload()">重新加载</button>
+        </div>
+      `;
+    }
+  }
+
+  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) {
-        loadingMsg.remove();
-        const errorMsg = document.createElement('div');
-        errorMsg.className = 'ai-message ai error';
-        errorMsg.textContent = '抱歉，发生了错误: ' + error.message;
-        aiChat.appendChild(errorMsg);
+        searchResults.innerHTML = `<div class="empty-state">搜索失败: ${error.message}</div>`;
       }
     };
 
-    aiSendBtn.addEventListener('click', sendMessage);
-    aiInput.addEventListener('keypress', (e) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        sendMessage();
-      }
+    searchBtn.addEventListener('click', performSearch);
+    searchInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') performSearch();
     });
   }
 
-  renderView('groups');
-}
-
+  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;
+  }
+
+
+  // 知识库（用户版 - 完整功能）
+  async function renderKnowledgeView(container) {
+    if (!currentGroup) {
+      container.innerHTML = `
+        <div class="empty-state" style="text-align: center; padding: 60px 20px; background: var(--bg-secondary); border-radius: 16px; border: 2px dashed var(--border);">
+          <div style="font-size: 64px; margin-bottom: 20px;">📚</div>
+          <h3 style="font-size: 24px; margin-bottom: 12px; color: var(--text-primary);">知识库</h3>
+          <p style="color: var(--text-secondary); margin-bottom: 24px; font-size: 16px;">请先在"我的群组"中选择一个群组</p>
+          <button class="btn-primary" onclick="document.querySelector('[data-view=\\"groups\\"]').click()" style="padding: 12px 32px; font-size: 16px;">
+            前往我的群组
+          </button>
+        </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();
+      
+      // 确保 knowledgeItems 是数组
+      let knowledgeItems = [];
+      if (Array.isArray(result)) {
+        knowledgeItems = result;
+      } else if (result.data && Array.isArray(result.data)) {
+        knowledgeItems = result.data;
+      } else if (result.data && result.data.knowledgeList && Array.isArray(result.data.knowledgeList)) {
+        knowledgeItems = result.data.knowledgeList;
+      } else if (result.items && Array.isArray(result.items)) {
+        knowledgeItems = result.items;
+      } else if (result.knowledge && Array.isArray(result.knowledge)) {
+        knowledgeItems = result.knowledge;
+      }
+
+      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">
+            <div class="modal-header">
+              <h3 id="modalTitle">创建知识条目</h3>
+              <button class="modal-close" id="closeKnowledgeModal">&times;</button>
+            </div>
+            <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="cancelKnowledgeModal" 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 || item.creator?.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="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('cancelKnowledgeModal').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) {
+            throw new Error('操作失败');
+          }
+
+          alert(editId ? '更新成功！' : '创建成功！');
+          document.getElementById('knowledgeModal').classList.add('hidden');
+          await renderKnowledgeView(container);
+        } catch (error) {
+          alert('操作失败: ' + error.message);
+        }
+      });
+
+    } catch (error) {
+      console.error('加载知识库失败:', error);
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>📚 知识库 - ${currentGroup.name}</h2>
+        </div>
+        <div class="empty-state" style="text-align: center; padding: 40px 20px;">
+          <div style="font-size: 48px; margin-bottom: 16px;">⚠️</div>
+          <h3 style="margin-bottom: 8px; color: var(--danger);">加载失败</h3>
+          <p style="color: var(--text-secondary); margin-bottom: 16px;">${error.message}</p>
+          <button class="btn-primary" onclick="location.reload()">重新加载</button>
+        </div>
+      `;
+    }
+  }
+
+
+  renderView('groups');
+}
+