collabdocchat 2.0.3 → 2.0.5

package/src/utils/collaboration-enhancer.js

@@ -1,7 +1,6 @@
 /**
  * 协作增强功能
- * 提供更多协作工具和功能
- */
+ * 提供更多协作工具和功�? */
 
 export class CollaborationEnhancer {
   constructor(apiService, wsService) {
@@ -13,8 +12,7 @@ export class CollaborationEnhancer {
    * 协作白板
    */
   createWhiteboard(container, groupId, username, isAdmin = false) {
-    // 管理员控制按钮
-    const adminControls = isAdmin ? `
+    // 管理员控制按�?    const adminControls = isAdmin ? `
       <button class="btn-warning" id="toggleCollaboration">🔒 禁止协作</button>
       <button class="btn-success" id="sendToChat">📤 发送到群聊</button>
     ` : '';
@@ -25,7 +23,7 @@ export class CollaborationEnhancer {
           <button class="tool-btn active" data-tool="pen">✏️ 画笔</button>
           <button class="tool-btn" data-tool="eraser">🧹 橡皮</button>
           <button class="tool-btn" data-tool="text">📝 文字</button>
-          <button class="tool-btn" data-tool="shape">⬜ 形状</button>
+          <button class="tool-btn" data-tool="shape">�?形状</button>
           <input type="color" id="colorPicker" value="#6366f1" title="选择颜色">
           <input type="range" id="brushSize" min="1" max="20" value="3" title="画笔粗细">
           <button class="btn-secondary" id="clearBoard">清空</button>
@@ -38,7 +36,7 @@ export class CollaborationEnhancer {
             <span class="user-badge">👤 在线用户: <span id="userCount">1</span></span>
           </div>
           <div class="whiteboard-status" id="whiteboardStatus">
-            <span class="status-badge status-active">✓ 协作模式</span>
+            <span class="status-badge status-active">�?协作模式</span>
           </div>
         </div>
       </div>
@@ -76,14 +74,13 @@ export class CollaborationEnhancer {
       usersEl.innerHTML = `👤 在线用户 (${onlineUsers.size}): ${userList}`;
     };
 
-    // 更新协作状态显示
-    const updateCollaborationStatus = () => {
+    // 更新协作状态显�?    const updateCollaborationStatus = () => {
       const statusEl = container.querySelector('#whiteboardStatus');
       if (statusEl) {
         if (collaborationEnabled) {
-          statusEl.innerHTML = '<span class="status-badge status-active">✓ 协作模式</span>';
+          statusEl.innerHTML = '<span class="status-badge status-active">�?协作模式</span>';
         } else {
-          statusEl.innerHTML = '<span class="status-badge status-locked">🔒 仅管理员可编辑</span>';
+          statusEl.innerHTML = '<span class="status-badge status-locked">🔒 仅管理员可编�?/span>';
         }
       }
     };
@@ -111,12 +108,9 @@ export class CollaborationEnhancer {
     let lastX = 0;
     let lastY = 0;
 
-    // 检查是否可以绘画
-    const canDraw = () => {
-      if (isAdmin) return true; // 管理员始终可以绘画
-      if (!collaborationEnabled) {
-        return false; // 协作被禁用，普通用户不能绘画
-      }
+    // 检查是否可以绘�?    const canDraw = () => {
+      if (isAdmin) return true; // 管理员始终可以绘�?      if (!collaborationEnabled) {
+        return false; // 协作被禁用，普通用户不能绘�?      }
       return true;
     };
 
@@ -142,11 +136,9 @@ export class CollaborationEnhancer {
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
 
-      // 绘制到本地画布
-      this.drawLine(ctx, lastX, lastY, x, y, currentTool, currentColor, brushSize);
+      // 绘制到本地画�?      this.drawLine(ctx, lastX, lastY, x, y, currentTool, currentColor, brushSize);
 
-      // 广播绘画数据到其他用户
-      this.wsService.send({
+      // 广播绘画数据到其他用�?      this.wsService.send({
         type: 'whiteboard_draw',
         groupId: groupId,
         username: username,
@@ -174,10 +166,10 @@ export class CollaborationEnhancer {
     // 清空画布
     container.querySelector('#clearBoard').addEventListener('click', () => {
       if (!isAdmin && !collaborationEnabled) {
-        alert('管理员已禁止协作，无法清空画布');
+        alert('管理员已禁止协作，无法清空画�?);
         return;
       }
-      if (confirm('确定要清空画布吗？')) {
+      if (confirm('确定要清空画布吗�?)) {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         this.wsService.send({
           type: 'whiteboard_clear',
@@ -211,18 +203,16 @@ export class CollaborationEnhancer {
           toggleBtn.className = 'btn-success';
         }
         
-        // 更新状态显示
-        updateCollaborationStatus();
+        // 更新状态显�?        updateCollaborationStatus();
         
-        // 广播协作状态变更
-        this.wsService.send({
+        // 广播协作状态变�?        this.wsService.send({
           type: 'whiteboard_collaboration_toggle',
           groupId: groupId,
           enabled: collaborationEnabled,
           username: username
         });
         
-        alert(collaborationEnabled ? '已允许所有用户协作绘画' : '已禁止普通用户绘画，仅管理员可编辑');
+        alert(collaborationEnabled ? '已允许所有用户协作绘�? : '已禁止普通用户绘画，仅管理员可编�?);
       });
     }
 
@@ -253,36 +243,32 @@ export class CollaborationEnhancer {
               // 获取文件查看URL（用于在线预览）
               const fileViewUrl = this.apiService.getFileViewUrl(uploadResult.file._id);
               
-              // 发送包含图片的消息到群聊
-              const message = `📋 ${username} 分享了白板内容\n<img src="${fileViewUrl}" alt="白板" class="chat-image" data-file-id="${uploadResult.file._id}">`;
+              // 发送包含图片的消息到群�?              const message = `📋 ${username} 分享了白板内容\n<img src="${fileViewUrl}" alt="白板" class="chat-image" data-file-id="${uploadResult.file._id}">`;
               this.wsService.sendChatMessage(groupId, username, message);
               
-              alert('白板已发送到群聊！');
+              alert('白板已发送到群聊�?);
               sendBtn.disabled = false;
               sendBtn.textContent = '📤 发送到群聊';
             } catch (error) {
-              console.error('发送白板失败:', error);
-              alert('发送失败: ' + error.message);
+              console.error('发送白板失�?', error);
+              alert('发送失�? ' + error.message);
               sendBtn.disabled = false;
               sendBtn.textContent = '📤 发送到群聊';
             }
           }, 'image/png');
         } catch (error) {
-          console.error('发送白板失败:', error);
-          alert('发送失败: ' + error.message);
+          console.error('发送白板失�?', error);
+          alert('发送失�? ' + error.message);
         }
       });
     }
 
-    // 监听其他用户的绘画
-    this.wsService.on('whiteboard_draw', (data) => {
+    // 监听其他用户的绘�?    this.wsService.on('whiteboard_draw', (data) => {
       if (data.groupId === groupId) {
-        // 绘制其他用户的笔画
-        this.drawLine(ctx, data.data.from.x, data.data.from.y, data.data.to.x, data.data.to.y, 
+        // 绘制其他用户的笔�?        this.drawLine(ctx, data.data.from.x, data.data.from.y, data.data.to.x, data.data.to.y, 
                       data.data.tool, data.data.color, data.data.size);
         
-        // 显示绘画者信息（短暂提示）
-        if (data.username && data.username !== username) {
+        // 显示绘画者信息（短暂提示�?        if (data.username && data.username !== username) {
           this.showDrawingNotification(container, data.username);
         }
       }
@@ -328,21 +314,18 @@ export class CollaborationEnhancer {
       }
     });
 
-    // 通知其他用户自己加入了白板
-    this.wsService.send({
+    // 通知其他用户自己加入了白�?    this.wsService.send({
       type: 'whiteboard_user_join',
       groupId: groupId,
       username: username
     });
 
-    // 初始化显示
-    updateOnlineUsers();
+    // 初始化显�?    updateOnlineUsers();
     updateCollaborationStatus();
   }
 
   /**
-   * 绘制线条的辅助方法
-   */
+   * 绘制线条的辅助方�?   */
   drawLine(ctx, fromX, fromY, toX, toY, tool, color, size) {
     ctx.beginPath();
     ctx.moveTo(fromX, fromY);
@@ -396,10 +379,10 @@ export class CollaborationEnhancer {
     container.innerHTML = `
       <div class="poll-creator">
         <h3>创建投票任务</h3>
-        <p class="info-text">投票将作为任务分配给所有群组成员，成员可以在"我的任务"中查看并投票</p>
+        <p class="info-text">投票将作为任务分配给所有群组成员，成员可以�?我的任务"中查看并投票</p>
         <div class="form-group">
           <label>投票标题</label>
-          <input type="text" id="pollTitle" placeholder="请输入投票标题">
+          <input type="text" id="pollTitle" placeholder="请输入投票标�?>
         </div>
         <div class="form-group">
           <label>投票说明</label>
@@ -416,8 +399,7 @@ export class CollaborationEnhancer {
         <div class="form-group">
           <label>
             <input type="checkbox" id="allowMultiple">
-            允许多选
-          </label>
+            允许多�?          </label>
         </div>
         <div class="form-group">
           <label>截止时间</label>
@@ -432,7 +414,7 @@ export class CollaborationEnhancer {
       const optionsDiv = container.querySelector('#pollOptions');
       const optionCount = optionsDiv.querySelectorAll('.poll-option').length + 1;
       if (optionCount > 10) {
-        alert('最多只能添加10个选项');
+        alert('最多只能添�?0个选项');
         return;
       }
       const input = document.createElement('input');
@@ -469,15 +451,13 @@ export class CollaborationEnhancer {
           totalVotes: 0
         };
 
-        // 创建为任务
-        await this.apiService.createTask({
+        // 创建为任�?        await this.apiService.createTask({
           title: `📊 ${title}`,
-          description: description || '请在下方选项中投票',
+          description: description || '请在下方选项中投�?,
           groupId: groupId,
           assignedTo: memberIds,
           deadline: deadline || null,
-          type: 'poll',  // 标记为投票类型
-          pollData: pollData  // 投票数据
+          type: 'poll',  // 标记为投票类�?          pollData: pollData  // 投票数据
         });
 
         alert('投票任务创建成功！所有成员可以在"我的任务"中查看并投票');
@@ -485,10 +465,10 @@ export class CollaborationEnhancer {
         // 显示成功信息
         container.innerHTML = `
           <div class="success-message">
-            <h3>✅ 投票任务创建成功！</h3>
-            <p>投票标题：${title}</p>
-            <p>选项数量：${options.length}</p>
-            <p>分配给：${memberIds.length} 名成员</p>
+            <h3>�?投票任务创建成功�?/h3>
+            <p>投票标题�?{title}</p>
+            <p>选项数量�?{options.length}</p>
+            <p>分配给：${memberIds.length} 名成�?/p>
             <p>所有成员可以在"我的任务"中查看并投票</p>
             <button class="btn-primary" id="closeSuccessMsg">关闭</button>
           </div>
@@ -558,7 +538,7 @@ export class CollaborationEnhancer {
         votes: selected
       });
 
-      alert('投票成功！');
+      alert('投票成功�?);
     });
   }
 
@@ -580,7 +560,7 @@ export class CollaborationEnhancer {
       `;
 
       container.querySelector('#stopShare').addEventListener('click', () => {
-        container.innerHTML = '<p>屏幕共享已停止</p>';
+        container.innerHTML = '<p>屏幕共享已停�?/p>';
       });
     } catch (error) {
       alert('屏幕共享失败: ' + error.message);
@@ -602,10 +582,10 @@ export class CollaborationEnhancer {
             <option value="html">HTML</option>
             <option value="css">CSS</option>
           </select>
-          <button class="btn-secondary" id="formatCode">格式化</button>
+          <button class="btn-secondary" id="formatCode">格式�?/button>
           <button class="btn-primary" id="runCode">运行</button>
         </div>
-        <textarea id="codeEditor" placeholder="在这里编写代码..."></textarea>
+        <textarea id="codeEditor" placeholder="在这里编写代�?.."></textarea>
         <div class="code-output" id="codeOutput">
           <h4>输出</h4>
           <pre id="outputContent"></pre>
@@ -616,10 +596,8 @@ export class CollaborationEnhancer {
     const editor = container.querySelector('#codeEditor');
     const output = container.querySelector('#outputContent');
 
-    // 格式化代码
-    container.querySelector('#formatCode').addEventListener('click', () => {
-      // 简单的格式化（实际应使用专业的格式化库）
-      const code = editor.value;
+    // 格式化代�?    container.querySelector('#formatCode').addEventListener('click', () => {
+      // 简单的格式化（实际应使用专业的格式化库�?      const code = editor.value;
       const formatted = code.split('\n').map(line => line.trim()).join('\n');
       editor.value = formatted;
     });
@@ -652,15 +630,14 @@ export class CollaborationEnhancer {
   }
 
   /**
-   * 思维导图 - 增强版
-   */
+   * 思维导图 - 增强�?   */
   createMindMap(container) {
     container.innerHTML = `
       <div class="mindmap-container">
         <div class="mindmap-toolbar">
-          <button class="btn-secondary" id="addChildNode">➕ 添加子节点</button>
-          <button class="btn-secondary" id="addSiblingNode">➕ 添加同级节点</button>
-          <button class="btn-danger" id="deleteNode">🗑️ 删除节点</button>
+          <button class="btn-secondary" id="addChildNode">�?添加子节�?/button>
+          <button class="btn-secondary" id="addSiblingNode">�?添加同级节点</button>
+          <button class="btn-danger" id="deleteNode">🗑�?删除节点</button>
           <button class="btn-secondary" id="toggleLines">🔗 显示/隐藏连线</button>
           <button class="btn-secondary" id="autoLayout">📐 自动布局</button>
           <button class="btn-primary" id="saveMindMap">💾 保存</button>
@@ -670,18 +647,18 @@ export class CollaborationEnhancer {
           <svg class="mindmap-lines" id="mindmapLines"></svg>
           <div class="mindmap-node root" data-id="root" data-level="0" style="left: 400px; top: 50px;">
             <div class="node-actions">
-              <button class="node-action-btn add" title="添加子节点">+</button>
+              <button class="node-action-btn add" title="添加子节�?>+</button>
             </div>
             <div class="node-content" contenteditable="true">中心主题</div>
           </div>
           <div class="mindmap-legend">
             <div class="mindmap-legend-item">
               <div class="legend-color" style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);"></div>
-              <span>根节点</span>
+              <span>根节�?/span>
             </div>
             <div class="mindmap-legend-item">
               <div class="legend-color" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);"></div>
-              <span>一级节点</span>
+              <span>一级节�?/span>
             </div>
             <div class="mindmap-legend-item">
               <div class="legend-color" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);"></div>
@@ -703,16 +680,14 @@ export class CollaborationEnhancer {
     nodes.set('root', { element: rootNode, parent: null, children: [] });
     this.makeDraggable(rootNode, () => this.updateLines(container, connections, showLines));
 
-    // 添加子节点
-    const addChildNode = (parentNode) => {
+    // 添加子节�?    const addChildNode = (parentNode) => {
       const canvas = container.querySelector('#mindmapCanvas');
       const parentId = parentNode.dataset.id;
       const parentLevel = parseInt(parentNode.dataset.level || 0);
       const childLevel = parentLevel + 1;
       const nodeId = `node_${++nodeCount}`;
       
-      // 确定节点样式类
-      let nodeClass = 'mindmap-node';
+      // 确定节点样式�?      let nodeClass = 'mindmap-node';
       if (childLevel === 1) nodeClass += ' child';
       else if (childLevel >= 2) nodeClass += ' grandchild';
       
@@ -731,10 +706,10 @@ export class CollaborationEnhancer {
       node.style.top = top + 'px';
       node.innerHTML = `
         <div class="node-actions">
-          <button class="node-action-btn add" title="添加子节点">+</button>
+          <button class="node-action-btn add" title="添加子节�?>+</button>
           <button class="node-action-btn delete" title="删除节点">×</button>
         </div>
-        <div class="node-content" contenteditable="true">新节点</div>
+        <div class="node-content" contenteditable="true">新节�?/div>
       `;
       
       canvas.appendChild(node);
@@ -760,15 +735,13 @@ export class CollaborationEnhancer {
       return node;
     };
 
-    // 绑定根节点操作按钮
-    this.bindNodeActions(rootNode, container, nodes, connections, showLines);
+    // 绑定根节点操作按�?    this.bindNodeActions(rootNode, container, nodes, connections, showLines);
 
-    // 添加子节点按钮
-    container.querySelector('#addChildNode').addEventListener('click', () => {
+    // 添加子节点按�?    container.querySelector('#addChildNode').addEventListener('click', () => {
       if (selectedNode) {
         addChildNode(selectedNode);
       } else {
-        alert('请先选择一个节点');
+        alert('请先选择一个节�?);
       }
     });
 
@@ -780,7 +753,7 @@ export class CollaborationEnhancer {
           addChildNode(parentNode);
         }
       } else {
-        alert('根节点没有同级节点');
+        alert('根节点没有同级节�?);
       }
     });
 
@@ -791,7 +764,7 @@ export class CollaborationEnhancer {
         this.updateLines(container, connections, showLines);
         selectedNode = null;
       } else {
-        alert('请选择要删除的节点（根节点不能删除）');
+        alert('请选择要删除的节点（根节点不能删除�?);
       }
     });
 
@@ -835,34 +808,30 @@ export class CollaborationEnhancer {
 
       console.log('思维导图数据:', data);
       
-      // 保存到本地存储
-      localStorage.setItem('mindmap_data', JSON.stringify(data));
-      alert('思维导图已保存到本地！');
+      // 保存到本地存�?      localStorage.setItem('mindmap_data', JSON.stringify(data));
+      alert('思维导图已保存到本地�?);
     });
 
-    // 导出为图片
-    container.querySelector('#exportImage').addEventListener('click', async () => {
+    // 导出为图�?    container.querySelector('#exportImage').addEventListener('click', async () => {
       try {
         const canvas = container.querySelector('#mindmapCanvas');
         
-        // 使用 html2canvas 库（如果可用）
-        if (typeof html2canvas !== 'undefined') {
+        // 使用 html2canvas 库（如果可用�?        if (typeof html2canvas !== 'undefined') {
           const canvasElement = await html2canvas(canvas);
           const link = document.createElement('a');
           link.download = `mindmap_${Date.now()}.png`;
           link.href = canvasElement.toDataURL();
           link.click();
         } else {
-          alert('导出图片功能需要 html2canvas 库支持。\n您可以使用浏览器的截图功能来保存思维导图。');
+          alert('导出图片功能需�?html2canvas 库支持。\n您可以使用浏览器的截图功能来保存思维导图�?);
         }
       } catch (error) {
         console.error('导出失败:', error);
-        alert('导出失败，请使用浏览器截图功能');
+        alert('导出失败，请使用浏览器截图功�?);
       }
     });
 
-    // 初始化连线
-    this.updateLines(container, connections, showLines);
+    // 初始化连�?    this.updateLines(container, connections, showLines);
   }
 
   /**
@@ -899,10 +868,10 @@ export class CollaborationEnhancer {
         newNode.style.top = top + 'px';
         newNode.innerHTML = `
           <div class="node-actions">
-            <button class="node-action-btn add" title="添加子节点">+</button>
+            <button class="node-action-btn add" title="添加子节�?>+</button>
             <button class="node-action-btn delete" title="删除节点">×</button>
           </div>
-          <div class="node-content" contenteditable="true">新节点</div>
+          <div class="node-content" contenteditable="true">新节�?/div>
         `;
         
         canvas.appendChild(newNode);
@@ -947,8 +916,7 @@ export class CollaborationEnhancer {
       // 删除所有子节点
       info.children.forEach(childId => deleteRecursive(childId));
       
-      // 从父节点的子节点列表中移除
-      if (info.parent) {
+      // 从父节点的子节点列表中移�?      if (info.parent) {
         const parentInfo = nodes.get(info.parent);
         if (parentInfo) {
           parentInfo.children = parentInfo.children.filter(cid => cid !== id);
@@ -963,16 +931,14 @@ export class CollaborationEnhancer {
         info.element.remove();
       }
       
-      // 从nodes中删除
-      nodes.delete(id);
+      // 从nodes中删�?      nodes.delete(id);
     };
     
     deleteRecursive(nodeId);
   }
 
   /**
-   * 更新连线 - 性能优化版
-   */
+   * 更新连线 - 性能优化�?   */
   updateLines(container, connections, showLines) {
     const svg = container.querySelector('#mindmapLines');
     if (!svg) return;
@@ -1013,8 +979,7 @@ export class CollaborationEnhancer {
         const x2 = childRect.left - canvasRect.left;
         const y2 = childRect.top - canvasRect.top + childRect.height / 2;
         
-        // 创建贝塞尔曲线
-        const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        // 创建贝塞尔曲�?        const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
         const midX = (x1 + x2) / 2;
         const d = `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`;
         line.setAttribute('d', d);
@@ -1026,8 +991,7 @@ export class CollaborationEnhancer {
         tempSvg.appendChild(line);
       });
       
-      // 一次性替换所有内容
-      svg.innerHTML = tempSvg.innerHTML;
+      // 一次性替换所有内�?      svg.innerHTML = tempSvg.innerHTML;
     });
   }
 
@@ -1038,12 +1002,10 @@ export class CollaborationEnhancer {
     const rootNode = nodes.get('root');
     if (!rootNode) return;
     
-    // 设置根节点位置
-    rootNode.element.style.left = '50px';
+    // 设置根节点位�?    rootNode.element.style.left = '50px';
     rootNode.element.style.top = '50px';
     
-    // 递归布局子节点
-    const layoutChildren = (parentId, startX, startY, verticalSpacing = 100) => {
+    // 递归布局子节�?    const layoutChildren = (parentId, startX, startY, verticalSpacing = 100) => {
       const parentInfo = nodes.get(parentId);
       if (!parentInfo || parentInfo.children.length === 0) return;
       
@@ -1056,8 +1018,7 @@ export class CollaborationEnhancer {
         childInfo.element.style.left = startX + 'px';
         childInfo.element.style.top = currentY + 'px';
         
-        // 递归布局子节点的子节点
-        layoutChildren(childId, startX + 250, currentY, verticalSpacing);
+        // 递归布局子节点的子节�?        layoutChildren(childId, startX + 250, currentY, verticalSpacing);
         
         currentY += verticalSpacing;
       });
@@ -1065,12 +1026,11 @@ export class CollaborationEnhancer {
     
     layoutChildren('root', 300, 50);
     
-    alert('自动布局完成！');
+    alert('自动布局完成�?);
   }
 
   /**
-   * 使元素可拖动 - 性能优化版
-   */
+   * 使元素可拖动 - 性能优化�?   */
   makeDraggable(element, onDragEnd) {
     let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
     let isDragging = false;
@@ -1113,7 +1073,7 @@ export class CollaborationEnhancer {
       pos3 = e.clientX;
       pos4 = e.clientY;
         
-        // 直接使用 transform 而不是 top/left，性能更好
+        // 直接使用 transform 而不�?top/left，性能更好
         const newTop = element.offsetTop - pos2;
         const newLeft = element.offsetLeft - pos1;
         
@@ -1127,8 +1087,7 @@ export class CollaborationEnhancer {
       document.onmouseup = null;
       document.onmousemove = null;
       
-      // 取消未完成的动画帧
-      if (animationFrameId) {
+      // 取消未完成的动画�?      if (animationFrameId) {
         cancelAnimationFrame(animationFrameId);
         animationFrameId = null;
       }
@@ -1138,8 +1097,7 @@ export class CollaborationEnhancer {
       element.style.zIndex = '';
       element.style.transition = ''; // 恢复过渡动画
       
-      // 拖动结束后才更新连线（而不是拖动过程中）
-      if (typeof onDragEnd === 'function') {
+      // 拖动结束后才更新连线（而不是拖动过程中�?      if (typeof onDragEnd === 'function') {
         // 使用 setTimeout 确保 DOM 更新完成
         setTimeout(() => {
           onDragEnd();