collabdocchat 1.2.13 → 2.0.1

package/src/utils/collaboration-enhancer.js

@@ -0,0 +1,1151 @@
+/**
+ * 协作增强功能
+ * 提供更多协作工具和功能
+ */
+
+export class CollaborationEnhancer {
+  constructor(apiService, wsService) {
+    this.apiService = apiService;
+    this.wsService = wsService;
+  }
+
+  /**
+   * 协作白板
+   */
+  createWhiteboard(container, groupId, username, isAdmin = false) {
+    // 管理员控制按钮
+    const adminControls = isAdmin ? `
+      <button class="btn-warning" id="toggleCollaboration">🔒 禁止协作</button>
+      <button class="btn-success" id="sendToChat">📤 发送到群聊</button>
+    ` : '';
+
+    container.innerHTML = `
+      <div class="whiteboard-container">
+        <div class="whiteboard-toolbar">
+          <button class="tool-btn active" data-tool="pen">✏️ 画笔</button>
+          <button class="tool-btn" data-tool="eraser">🧹 橡皮</button>
+          <button class="tool-btn" data-tool="text">📝 文字</button>
+          <button class="tool-btn" data-tool="shape">⬜ 形状</button>
+          <input type="color" id="colorPicker" value="#6366f1" title="选择颜色">
+          <input type="range" id="brushSize" min="1" max="20" value="3" title="画笔粗细">
+          <button class="btn-secondary" id="clearBoard">清空</button>
+          <button class="btn-primary" id="saveBoard">保存</button>
+          ${adminControls}
+        </div>
+        <canvas id="whiteboard" width="800" height="600"></canvas>
+        <div class="whiteboard-footer">
+          <div class="whiteboard-users" id="whiteboardUsers">
+            <span class="user-badge">👤 在线用户: <span id="userCount">1</span></span>
+          </div>
+          <div class="whiteboard-status" id="whiteboardStatus">
+            <span class="status-badge status-active">✓ 协作模式</span>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const canvas = container.querySelector('#whiteboard');
+    const ctx = canvas.getContext('2d');
+    let isDrawing = false;
+    let currentTool = 'pen';
+    let currentColor = '#6366f1';
+    let brushSize = 3;
+    let collaborationEnabled = true; // 协作是否启用
+    let onlineUsers = new Set([username]); // 在线用户集合
+
+    // 调整画布大小
+    const resizeCanvas = () => {
+      const rect = canvas.parentElement.getBoundingClientRect();
+      const availableWidth = rect.width - 40;
+      const availableHeight = Math.min(500, window.innerHeight - 400);
+      
+      canvas.width = Math.max(600, availableWidth);
+      canvas.height = Math.max(400, availableHeight);
+    };
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+
+    // 更新在线用户显示
+    const updateOnlineUsers = () => {
+      const userCountEl = container.querySelector('#userCount');
+      if (userCountEl) {
+        userCountEl.textContent = onlineUsers.size;
+      }
+      const usersEl = container.querySelector('#whiteboardUsers');
+      const userList = Array.from(onlineUsers).map(u => `<span class="user-badge">${u}</span>`).join('');
+      usersEl.innerHTML = `👤 在线用户 (${onlineUsers.size}): ${userList}`;
+    };
+
+    // 更新协作状态显示
+    const updateCollaborationStatus = () => {
+      const statusEl = container.querySelector('#whiteboardStatus');
+      if (statusEl) {
+        if (collaborationEnabled) {
+          statusEl.innerHTML = '<span class="status-badge status-active">✓ 协作模式</span>';
+        } else {
+          statusEl.innerHTML = '<span class="status-badge status-locked">🔒 仅管理员可编辑</span>';
+        }
+      }
+    };
+
+    // 工具切换
+    container.querySelectorAll('.tool-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        container.querySelectorAll('.tool-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentTool = btn.dataset.tool;
+      });
+    });
+
+    // 颜色选择
+    container.querySelector('#colorPicker').addEventListener('change', (e) => {
+      currentColor = e.target.value;
+    });
+
+    // 画笔大小
+    container.querySelector('#brushSize').addEventListener('input', (e) => {
+      brushSize = e.target.value;
+    });
+
+    // 绘画逻辑
+    let lastX = 0;
+    let lastY = 0;
+
+    // 检查是否可以绘画
+    const canDraw = () => {
+      if (isAdmin) return true; // 管理员始终可以绘画
+      if (!collaborationEnabled) {
+        return false; // 协作被禁用，普通用户不能绘画
+      }
+      return true;
+    };
+
+    canvas.addEventListener('mousedown', (e) => {
+      if (!canDraw()) {
+        alert('管理员已禁止协作绘画');
+        return;
+      }
+      isDrawing = true;
+      const rect = canvas.getBoundingClientRect();
+      lastX = e.clientX - rect.left;
+      lastY = e.clientY - rect.top;
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+      if (!isDrawing) return;
+      if (!canDraw()) {
+        isDrawing = false;
+        return;
+      }
+
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      // 绘制到本地画布
+      this.drawLine(ctx, lastX, lastY, x, y, currentTool, currentColor, brushSize);
+
+      // 广播绘画数据到其他用户
+      this.wsService.send({
+        type: 'whiteboard_draw',
+        groupId: groupId,
+        username: username,
+        data: {
+          tool: currentTool,
+          color: currentColor,
+          size: brushSize,
+          from: { x: lastX, y: lastY },
+          to: { x, y }
+        }
+      });
+
+      lastX = x;
+      lastY = y;
+    });
+
+    canvas.addEventListener('mouseup', () => {
+      isDrawing = false;
+    });
+
+    canvas.addEventListener('mouseleave', () => {
+      isDrawing = false;
+    });
+
+    // 清空画布
+    container.querySelector('#clearBoard').addEventListener('click', () => {
+      if (!isAdmin && !collaborationEnabled) {
+        alert('管理员已禁止协作，无法清空画布');
+        return;
+      }
+      if (confirm('确定要清空画布吗？')) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        this.wsService.send({
+          type: 'whiteboard_clear',
+          groupId: groupId,
+          username: username
+        });
+      }
+    });
+
+    // 保存画布
+    container.querySelector('#saveBoard').addEventListener('click', () => {
+      const dataURL = canvas.toDataURL('image/png');
+      const link = document.createElement('a');
+      link.download = `whiteboard_${Date.now()}.png`;
+      link.href = dataURL;
+      link.click();
+    });
+
+    // 管理员功能：切换协作模式
+    if (isAdmin) {
+      const toggleBtn = container.querySelector('#toggleCollaboration');
+      toggleBtn.addEventListener('click', () => {
+        collaborationEnabled = !collaborationEnabled;
+        
+        // 更新按钮文本
+        if (collaborationEnabled) {
+          toggleBtn.innerHTML = '🔒 禁止协作';
+          toggleBtn.className = 'btn-warning';
+        } else {
+          toggleBtn.innerHTML = '🔓 允许协作';
+          toggleBtn.className = 'btn-success';
+        }
+        
+        // 更新状态显示
+        updateCollaborationStatus();
+        
+        // 广播协作状态变更
+        this.wsService.send({
+          type: 'whiteboard_collaboration_toggle',
+          groupId: groupId,
+          enabled: collaborationEnabled,
+          username: username
+        });
+        
+        alert(collaborationEnabled ? '已允许所有用户协作绘画' : '已禁止普通用户绘画，仅管理员可编辑');
+      });
+    }
+
+    // 发送到群聊（仅管理员）
+    if (isAdmin) {
+      container.querySelector('#sendToChat').addEventListener('click', async () => {
+        try {
+          const sendBtn = container.querySelector('#sendToChat');
+          sendBtn.disabled = true;
+          sendBtn.textContent = '发送中...';
+          
+          // 将画布转换为 Blob
+          canvas.toBlob(async (blob) => {
+            if (!blob) {
+              alert('生成图片失败');
+              sendBtn.disabled = false;
+              sendBtn.textContent = '📤 发送到群聊';
+              return;
+            }
+
+            try {
+              // 创建 File 对象
+              const file = new File([blob], `whiteboard_${Date.now()}.png`, { type: 'image/png' });
+
+              // 上传文件
+              const uploadResult = await this.apiService.uploadFile(groupId, file, '白板分享');
+              
+              // 获取文件查看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}">`;
+              this.wsService.sendChatMessage(groupId, username, message);
+              
+              alert('白板已发送到群聊！');
+              sendBtn.disabled = false;
+              sendBtn.textContent = '📤 发送到群聊';
+            } catch (error) {
+              console.error('发送白板失败:', error);
+              alert('发送失败: ' + error.message);
+              sendBtn.disabled = false;
+              sendBtn.textContent = '📤 发送到群聊';
+            }
+          }, 'image/png');
+        } catch (error) {
+          console.error('发送白板失败:', error);
+          alert('发送失败: ' + error.message);
+        }
+      });
+    }
+
+    // 监听其他用户的绘画
+    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, 
+                      data.data.tool, data.data.color, data.data.size);
+        
+        // 显示绘画者信息（短暂提示）
+        if (data.username && data.username !== username) {
+          this.showDrawingNotification(container, data.username);
+        }
+      }
+    });
+
+    // 监听清空画布
+    this.wsService.on('whiteboard_clear', (data) => {
+      if (data.groupId === groupId) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        if (data.username && data.username !== username) {
+          alert(`${data.username} 清空了画布`);
+        }
+      }
+    });
+
+    // 监听协作模式切换
+    this.wsService.on('whiteboard_collaboration_toggle', (data) => {
+      if (data.groupId === groupId) {
+        collaborationEnabled = data.enabled;
+        updateCollaborationStatus();
+        
+        if (!isAdmin) {
+          alert(data.enabled ? 
+            `管理员已允许协作绘画` : 
+            `管理员已禁止协作，您暂时无法绘画`
+          );
+        }
+      }
+    });
+
+    // 监听用户加入/离开
+    this.wsService.on('whiteboard_user_join', (data) => {
+      if (data.groupId === groupId) {
+        onlineUsers.add(data.username);
+        updateOnlineUsers();
+      }
+    });
+
+    this.wsService.on('whiteboard_user_leave', (data) => {
+      if (data.groupId === groupId) {
+        onlineUsers.delete(data.username);
+        updateOnlineUsers();
+      }
+    });
+
+    // 通知其他用户自己加入了白板
+    this.wsService.send({
+      type: 'whiteboard_user_join',
+      groupId: groupId,
+      username: username
+    });
+
+    // 初始化显示
+    updateOnlineUsers();
+    updateCollaborationStatus();
+  }
+
+  /**
+   * 绘制线条的辅助方法
+   */
+  drawLine(ctx, fromX, fromY, toX, toY, tool, color, size) {
+    ctx.beginPath();
+    ctx.moveTo(fromX, fromY);
+    ctx.lineTo(toX, toY);
+    ctx.strokeStyle = tool === 'eraser' ? '#ffffff' : color;
+    ctx.lineWidth = size;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.stroke();
+  }
+
+  /**
+   * 显示绘画通知
+   */
+  showDrawingNotification(container, username) {
+    // 移除旧的通知
+    const oldNotification = container.querySelector('.drawing-notification');
+    if (oldNotification) {
+      oldNotification.remove();
+    }
+
+    // 创建新通知
+    const notification = document.createElement('div');
+    notification.className = 'drawing-notification';
+    notification.textContent = `${username} 正在绘画...`;
+    notification.style.cssText = `
+      position: absolute;
+      top: 60px;
+      right: 20px;
+      background: var(--primary);
+      color: white;
+      padding: 8px 16px;
+      border-radius: 8px;
+      font-size: 14px;
+      z-index: 1000;
+      animation: slideIn 0.3s ease;
+    `;
+    container.appendChild(notification);
+
+    // 3秒后自动移除
+    setTimeout(() => {
+      notification.style.animation = 'slideOut 0.3s ease';
+      setTimeout(() => notification.remove(), 300);
+    }, 3000);
+  }
+
+  /**
+   * 投票功能（管理员创建为任务）
+   */
+  createPoll(container, groupId) {
+    container.innerHTML = `
+      <div class="poll-creator">
+        <h3>创建投票任务</h3>
+        <p class="info-text">投票将作为任务分配给所有群组成员，成员可以在"我的任务"中查看并投票</p>
+        <div class="form-group">
+          <label>投票标题</label>
+          <input type="text" id="pollTitle" placeholder="请输入投票标题">
+        </div>
+        <div class="form-group">
+          <label>投票说明</label>
+          <textarea id="pollDescription" placeholder="请输入投票说明（可选）" rows="3"></textarea>
+        </div>
+        <div class="form-group">
+          <label>选项</label>
+          <div id="pollOptions">
+            <input type="text" class="poll-option" placeholder="选项 1">
+            <input type="text" class="poll-option" placeholder="选项 2">
+          </div>
+          <button class="btn-secondary" id="addOption">+ 添加选项</button>
+        </div>
+        <div class="form-group">
+          <label>
+            <input type="checkbox" id="allowMultiple">
+            允许多选
+          </label>
+        </div>
+        <div class="form-group">
+          <label>截止时间</label>
+          <input type="datetime-local" id="pollDeadline">
+        </div>
+        <button class="btn-primary" id="createPoll">创建投票任务</button>
+      </div>
+    `;
+
+    // 添加选项
+    container.querySelector('#addOption').addEventListener('click', () => {
+      const optionsDiv = container.querySelector('#pollOptions');
+      const optionCount = optionsDiv.querySelectorAll('.poll-option').length + 1;
+      if (optionCount > 10) {
+        alert('最多只能添加10个选项');
+        return;
+      }
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.className = 'poll-option';
+      input.placeholder = `选项 ${optionCount}`;
+      optionsDiv.appendChild(input);
+    });
+
+    // 创建投票任务
+    container.querySelector('#createPoll').addEventListener('click', async () => {
+      const title = container.querySelector('#pollTitle').value;
+      const description = container.querySelector('#pollDescription').value;
+      const options = Array.from(container.querySelectorAll('.poll-option'))
+        .map(input => input.value)
+        .filter(value => value.trim());
+      const allowMultiple = container.querySelector('#allowMultiple').checked;
+      const deadline = container.querySelector('#pollDeadline').value;
+
+      if (!title || options.length < 2) {
+        alert('请填写标题和至少两个选项');
+        return;
+      }
+
+      try {
+        // 获取群组信息
+        const groupResult = await this.apiService.getGroup(groupId);
+        const memberIds = groupResult.group.members.map(m => m._id);
+
+        // 创建投票数据
+        const pollData = {
+          options: options.map(opt => ({ text: opt, votes: [] })),
+          allowMultiple: allowMultiple,
+          totalVotes: 0
+        };
+
+        // 创建为任务
+        await this.apiService.createTask({
+          title: `📊 ${title}`,
+          description: description || '请在下方选项中投票',
+          groupId: groupId,
+          assignedTo: memberIds,
+          deadline: deadline || null,
+          type: 'poll',  // 标记为投票类型
+          pollData: pollData  // 投票数据
+        });
+
+        alert('投票任务创建成功！所有成员可以在"我的任务"中查看并投票');
+        
+        // 显示成功信息
+        container.innerHTML = `
+          <div class="success-message">
+            <h3>✅ 投票任务创建成功！</h3>
+            <p>投票标题：${title}</p>
+            <p>选项数量：${options.length}</p>
+            <p>分配给：${memberIds.length} 名成员</p>
+            <p>所有成员可以在"我的任务"中查看并投票</p>
+            <button class="btn-primary" id="closeSuccessMsg">关闭</button>
+          </div>
+        `;
+        
+        // 添加关闭按钮事件
+        container.querySelector('#closeSuccessMsg').addEventListener('click', () => {
+          // 关闭协作工具模态框
+          const modal = document.querySelector('.modal');
+          if (modal) {
+            modal.remove();
+          }
+        });
+      } catch (error) {
+        alert('创建投票任务失败: ' + error.message);
+      }
+    });
+  }
+
+  /**
+   * 显示投票
+   */
+  showPoll(container, poll, groupId) {
+    const totalVotes = poll.options.reduce((sum, opt) => sum + opt.votes.length, 0);
+
+    container.innerHTML = `
+      <div class="poll-display">
+        <h3>${poll.title}</h3>
+        <div class="poll-options">
+          ${poll.options.map((option, index) => {
+            const percentage = totalVotes > 0 ? (option.votes.length / totalVotes * 100).toFixed(1) : 0;
+            return `
+              <div class="poll-option-item">
+                <label>
+                  <input type="${poll.allowMultiple ? 'checkbox' : 'radio'}" 
+                         name="poll" 
+                         value="${index}">
+                  <span>${option.text}</span>
+                </label>
+                <div class="poll-progress">
+                  <div class="poll-bar" style="width: ${percentage}%"></div>
+                  <span class="poll-percentage">${percentage}% (${option.votes.length})</span>
+                </div>
+              </div>
+            `;
+          }).join('')}
+        </div>
+        <button class="btn-primary" id="submitVote">提交投票</button>
+        ${poll.deadline ? `<p class="poll-deadline">截止时间: ${new Date(poll.deadline).toLocaleString()}</p>` : ''}
+      </div>
+    `;
+
+    // 提交投票
+    container.querySelector('#submitVote').addEventListener('click', () => {
+      const selected = Array.from(container.querySelectorAll('input[name="poll"]:checked'))
+        .map(input => parseInt(input.value));
+
+      if (selected.length === 0) {
+        alert('请选择至少一个选项');
+        return;
+      }
+
+      this.wsService.send({
+        type: 'poll_vote',
+        groupId: groupId,
+        pollId: poll.id,
+        votes: selected
+      });
+
+      alert('投票成功！');
+    });
+  }
+
+  /**
+   * 屏幕共享（模拟）
+   */
+  async startScreenShare(container) {
+    try {
+      // 实际应用中应使用 navigator.mediaDevices.getDisplayMedia()
+      container.innerHTML = `
+        <div class="screen-share">
+          <h3>屏幕共享</h3>
+          <p>屏幕共享功能需要浏览器支持 Screen Capture API</p>
+          <div class="screen-preview">
+            <p>📺 屏幕共享预览区域</p>
+          </div>
+          <button class="btn-danger" id="stopShare">停止共享</button>
+        </div>
+      `;
+
+      container.querySelector('#stopShare').addEventListener('click', () => {
+        container.innerHTML = '<p>屏幕共享已停止</p>';
+      });
+    } catch (error) {
+      alert('屏幕共享失败: ' + error.message);
+    }
+  }
+
+  /**
+   * 代码协作编辑
+   */
+  createCodeEditor(container) {
+    container.innerHTML = `
+      <div class="code-editor">
+        <div class="editor-toolbar">
+          <select id="languageSelect">
+            <option value="javascript">JavaScript</option>
+            <option value="python">Python</option>
+            <option value="java">Java</option>
+            <option value="cpp">C++</option>
+            <option value="html">HTML</option>
+            <option value="css">CSS</option>
+          </select>
+          <button class="btn-secondary" id="formatCode">格式化</button>
+          <button class="btn-primary" id="runCode">运行</button>
+        </div>
+        <textarea id="codeEditor" placeholder="在这里编写代码..."></textarea>
+        <div class="code-output" id="codeOutput">
+          <h4>输出</h4>
+          <pre id="outputContent"></pre>
+        </div>
+      </div>
+    `;
+
+    const editor = container.querySelector('#codeEditor');
+    const output = container.querySelector('#outputContent');
+
+    // 格式化代码
+    container.querySelector('#formatCode').addEventListener('click', () => {
+      // 简单的格式化（实际应使用专业的格式化库）
+      const code = editor.value;
+      const formatted = code.split('\n').map(line => line.trim()).join('\n');
+      editor.value = formatted;
+    });
+
+    // 运行代码（模拟）
+    container.querySelector('#runCode').addEventListener('click', () => {
+      const code = editor.value;
+      const language = container.querySelector('#languageSelect').value;
+      
+      output.textContent = `正在运行 ${language} 代码...\n\n`;
+      
+      setTimeout(() => {
+        output.textContent += `代码执行完成！\n`;
+        output.textContent += `（实际应用中需要后端支持代码执行）`;
+      }, 1000);
+    });
+
+    // 实时同步代码
+    let syncTimeout;
+    editor.addEventListener('input', () => {
+      clearTimeout(syncTimeout);
+      syncTimeout = setTimeout(() => {
+        this.wsService.send({
+          type: 'code_sync',
+          code: editor.value,
+          language: container.querySelector('#languageSelect').value
+        });
+      }, 500);
+    });
+  }
+
+  /**
+   * 思维导图 - 增强版
+   */
+  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="toggleLines">🔗 显示/隐藏连线</button>
+          <button class="btn-secondary" id="autoLayout">📐 自动布局</button>
+          <button class="btn-primary" id="saveMindMap">💾 保存</button>
+          <button class="btn-success" id="exportImage">📸 导出图片</button>
+        </div>
+        <div class="mindmap-canvas" id="mindmapCanvas">
+          <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>
+            </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>
+            </div>
+            <div class="mindmap-legend-item">
+              <div class="legend-color" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);"></div>
+              <span>一级节点</span>
+            </div>
+            <div class="mindmap-legend-item">
+              <div class="legend-color" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);"></div>
+              <span>二级节点</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    let nodeCount = 0;
+    let selectedNode = null;
+    let showLines = true;
+    const nodes = new Map();
+    const connections = new Map(); // 存储父子关系
+
+    // 初始化根节点
+    const rootNode = container.querySelector('.mindmap-node.root');
+    nodes.set('root', { element: rootNode, parent: null, children: [] });
+    this.makeDraggable(rootNode, () => this.updateLines(container, connections, showLines));
+
+    // 添加子节点
+    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';
+      if (childLevel === 1) nodeClass += ' child';
+      else if (childLevel >= 2) nodeClass += ' grandchild';
+      
+      // 计算子节点位置（在父节点右下方）
+      const parentRect = parentNode.getBoundingClientRect();
+      const canvasRect = canvas.getBoundingClientRect();
+      const left = (parentRect.left - canvasRect.left) + 200;
+      const top = (parentRect.top - canvasRect.top) + (nodes.get(parentId).children.length * 80);
+      
+      const node = document.createElement('div');
+      node.className = nodeClass;
+      node.dataset.id = nodeId;
+      node.dataset.level = childLevel;
+      node.dataset.parent = parentId;
+      node.style.left = left + 'px';
+      node.style.top = top + 'px';
+      node.innerHTML = `
+        <div class="node-actions">
+          <button class="node-action-btn add" title="添加子节点">+</button>
+          <button class="node-action-btn delete" title="删除节点">×</button>
+        </div>
+        <div class="node-content" contenteditable="true">新节点</div>
+      `;
+      
+      canvas.appendChild(node);
+      
+      // 记录节点关系
+      nodes.set(nodeId, { element: node, parent: parentId, children: [] });
+      nodes.get(parentId).children.push(nodeId);
+      connections.set(nodeId, parentId);
+
+      // 使节点可拖动
+      this.makeDraggable(node, () => this.updateLines(container, connections, showLines));
+      
+      // 绑定节点操作按钮
+      this.bindNodeActions(node, container, nodes, connections, showLines);
+      
+      // 更新连线
+      this.updateLines(container, connections, showLines);
+      
+      // 自动聚焦到新节点
+      node.querySelector('.node-content').focus();
+      node.querySelector('.node-content').select();
+      
+      return node;
+    };
+
+    // 绑定根节点操作按钮
+    this.bindNodeActions(rootNode, container, nodes, connections, showLines);
+
+    // 添加子节点按钮
+    container.querySelector('#addChildNode').addEventListener('click', () => {
+      if (selectedNode) {
+        addChildNode(selectedNode);
+      } else {
+        alert('请先选择一个节点');
+      }
+    });
+
+    // 添加同级节点按钮
+    container.querySelector('#addSiblingNode').addEventListener('click', () => {
+      if (selectedNode && selectedNode.dataset.parent) {
+        const parentNode = container.querySelector(`[data-id="${selectedNode.dataset.parent}"]`);
+        if (parentNode) {
+          addChildNode(parentNode);
+        }
+      } else {
+        alert('根节点没有同级节点');
+      }
+    });
+
+    // 删除节点按钮
+    container.querySelector('#deleteNode').addEventListener('click', () => {
+      if (selectedNode && !selectedNode.classList.contains('root')) {
+        this.deleteNodeAndChildren(selectedNode, nodes, connections);
+        this.updateLines(container, connections, showLines);
+        selectedNode = null;
+      } else {
+        alert('请选择要删除的节点（根节点不能删除）');
+      }
+    });
+
+    // 切换连线显示
+    container.querySelector('#toggleLines').addEventListener('click', () => {
+      showLines = !showLines;
+      this.updateLines(container, connections, showLines);
+    });
+
+    // 自动布局
+    container.querySelector('#autoLayout').addEventListener('click', () => {
+      this.autoLayoutNodes(container, nodes);
+      this.updateLines(container, connections, showLines);
+    });
+
+    // 节点选择
+    container.addEventListener('click', (e) => {
+      const node = e.target.closest('.mindmap-node');
+      if (node) {
+        container.querySelectorAll('.mindmap-node').forEach(n => n.classList.remove('selected'));
+        node.classList.add('selected');
+        selectedNode = node;
+      }
+    });
+
+    // 保存思维导图
+    container.querySelector('#saveMindMap').addEventListener('click', () => {
+      const data = {
+        nodes: Array.from(nodes.entries()).map(([id, info]) => ({
+          id: id,
+          content: info.element.querySelector('.node-content').textContent,
+          level: info.element.dataset.level,
+          parent: info.parent,
+        position: {
+            left: info.element.style.left,
+            top: info.element.style.top
+        }
+        })),
+        connections: Array.from(connections.entries())
+      };
+
+      console.log('思维导图数据:', data);
+      
+      // 保存到本地存储
+      localStorage.setItem('mindmap_data', JSON.stringify(data));
+      alert('思维导图已保存到本地！');
+    });
+
+    // 导出为图片
+    container.querySelector('#exportImage').addEventListener('click', async () => {
+      try {
+        const canvas = container.querySelector('#mindmapCanvas');
+        
+        // 使用 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您可以使用浏览器的截图功能来保存思维导图。');
+        }
+      } catch (error) {
+        console.error('导出失败:', error);
+        alert('导出失败，请使用浏览器截图功能');
+      }
+    });
+
+    // 初始化连线
+    this.updateLines(container, connections, showLines);
+  }
+
+  /**
+   * 绑定节点操作按钮
+   */
+  bindNodeActions(node, container, nodes, connections, showLines) {
+    const addBtn = node.querySelector('.node-action-btn.add');
+    const deleteBtn = node.querySelector('.node-action-btn.delete');
+    
+    if (addBtn) {
+      addBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const canvas = container.querySelector('#mindmapCanvas');
+        const parentId = node.dataset.id;
+        const parentLevel = parseInt(node.dataset.level || 0);
+        const childLevel = parentLevel + 1;
+        const nodeId = `node_${Date.now()}`;
+        
+        let nodeClass = 'mindmap-node';
+        if (childLevel === 1) nodeClass += ' child';
+        else if (childLevel >= 2) nodeClass += ' grandchild';
+        
+        const parentRect = node.getBoundingClientRect();
+        const canvasRect = canvas.getBoundingClientRect();
+        const left = (parentRect.left - canvasRect.left) + 200;
+        const top = (parentRect.top - canvasRect.top) + (nodes.get(parentId).children.length * 80);
+        
+        const newNode = document.createElement('div');
+        newNode.className = nodeClass;
+        newNode.dataset.id = nodeId;
+        newNode.dataset.level = childLevel;
+        newNode.dataset.parent = parentId;
+        newNode.style.left = left + 'px';
+        newNode.style.top = top + 'px';
+        newNode.innerHTML = `
+          <div class="node-actions">
+            <button class="node-action-btn add" title="添加子节点">+</button>
+            <button class="node-action-btn delete" title="删除节点">×</button>
+          </div>
+          <div class="node-content" contenteditable="true">新节点</div>
+        `;
+        
+        canvas.appendChild(newNode);
+        
+        nodes.set(nodeId, { element: newNode, parent: parentId, children: [] });
+        nodes.get(parentId).children.push(nodeId);
+        connections.set(nodeId, parentId);
+        
+        this.makeDraggable(newNode, () => this.updateLines(container, connections, showLines));
+        this.bindNodeActions(newNode, container, nodes, connections, showLines);
+        this.updateLines(container, connections, showLines);
+        
+        newNode.querySelector('.node-content').focus();
+      });
+    }
+    
+    if (deleteBtn) {
+      deleteBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (confirm('确定要删除此节点及其所有子节点吗？')) {
+          this.deleteNodeAndChildren(node, nodes, connections);
+          this.updateLines(container, connections, showLines);
+        }
+      });
+    }
+  }
+
+  /**
+   * 删除节点及其所有子节点
+   */
+  deleteNodeAndChildren(node, nodes, connections) {
+    const nodeId = node.dataset.id;
+    const nodeInfo = nodes.get(nodeId);
+    
+    if (!nodeInfo) return;
+    
+    // 递归删除所有子节点
+    const deleteRecursive = (id) => {
+      const info = nodes.get(id);
+      if (!info) return;
+      
+      // 删除所有子节点
+      info.children.forEach(childId => deleteRecursive(childId));
+      
+      // 从父节点的子节点列表中移除
+      if (info.parent) {
+        const parentInfo = nodes.get(info.parent);
+        if (parentInfo) {
+          parentInfo.children = parentInfo.children.filter(cid => cid !== id);
+        }
+      }
+      
+      // 删除连接
+      connections.delete(id);
+      
+      // 删除DOM元素
+      if (info.element && info.element.parentNode) {
+        info.element.remove();
+      }
+      
+      // 从nodes中删除
+      nodes.delete(id);
+    };
+    
+    deleteRecursive(nodeId);
+  }
+
+  /**
+   * 更新连线 - 性能优化版
+   */
+  updateLines(container, connections, showLines) {
+    const svg = container.querySelector('#mindmapLines');
+    if (!svg) return;
+    
+    if (!showLines) {
+      svg.innerHTML = '';
+      return;
+    }
+    
+    // 使用 requestAnimationFrame 批量更新
+    requestAnimationFrame(() => {
+      const canvas = container.querySelector('#mindmapCanvas');
+      const canvasRect = canvas.getBoundingClientRect();
+      
+      // 设置SVG尺寸
+      svg.setAttribute('width', canvas.scrollWidth);
+      svg.setAttribute('height', canvas.scrollHeight);
+      svg.style.position = 'absolute';
+      svg.style.top = '0';
+      svg.style.left = '0';
+      svg.style.pointerEvents = 'none';
+      
+      // 使用 DocumentFragment 批量添加元素
+      const fragment = document.createDocumentFragment();
+      const tempSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      
+      connections.forEach((parentId, childId) => {
+        const childNode = container.querySelector(`[data-id="${childId}"]`);
+        const parentNode = container.querySelector(`[data-id="${parentId}"]`);
+        
+        if (!childNode || !parentNode) return;
+        
+        const childRect = childNode.getBoundingClientRect();
+        const parentRect = parentNode.getBoundingClientRect();
+        
+        const x1 = parentRect.left - canvasRect.left + parentRect.width;
+        const y1 = parentRect.top - canvasRect.top + parentRect.height / 2;
+        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 midX = (x1 + x2) / 2;
+        const d = `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`;
+        line.setAttribute('d', d);
+        line.setAttribute('stroke', '#6366f1');
+        line.setAttribute('stroke-width', '2');
+        line.setAttribute('fill', 'none');
+        line.setAttribute('stroke-linecap', 'round');
+        
+        tempSvg.appendChild(line);
+      });
+      
+      // 一次性替换所有内容
+      svg.innerHTML = tempSvg.innerHTML;
+    });
+  }
+
+  /**
+   * 自动布局节点
+   */
+  autoLayoutNodes(container, nodes) {
+    const rootNode = nodes.get('root');
+    if (!rootNode) return;
+    
+    // 设置根节点位置
+    rootNode.element.style.left = '50px';
+    rootNode.element.style.top = '50px';
+    
+    // 递归布局子节点
+    const layoutChildren = (parentId, startX, startY, verticalSpacing = 100) => {
+      const parentInfo = nodes.get(parentId);
+      if (!parentInfo || parentInfo.children.length === 0) return;
+      
+      let currentY = startY;
+      
+      parentInfo.children.forEach((childId, index) => {
+        const childInfo = nodes.get(childId);
+        if (!childInfo) return;
+        
+        childInfo.element.style.left = startX + 'px';
+        childInfo.element.style.top = currentY + 'px';
+        
+        // 递归布局子节点的子节点
+        layoutChildren(childId, startX + 250, currentY, verticalSpacing);
+        
+        currentY += verticalSpacing;
+      });
+    };
+    
+    layoutChildren('root', 300, 50);
+    
+    alert('自动布局完成！');
+  }
+
+  /**
+   * 使元素可拖动 - 性能优化版
+   */
+  makeDraggable(element, onDragEnd) {
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    let isDragging = false;
+    let animationFrameId = null;
+
+    element.onmousedown = dragMouseDown;
+
+    function dragMouseDown(e) {
+      // 如果点击的是可编辑内容或按钮，不触发拖动
+      if (e.target.contentEditable === 'true' || e.target.tagName === 'BUTTON') return;
+      
+      e.preventDefault();
+      e.stopPropagation();
+      pos3 = e.clientX;
+      pos4 = e.clientY;
+      isDragging = true;
+      
+      document.onmouseup = closeDragElement;
+      document.onmousemove = elementDrag;
+      
+      // 添加拖动样式
+      element.style.cursor = 'grabbing';
+      element.style.zIndex = '1000';
+      element.style.transition = 'none'; // 禁用过渡动画以提高性能
+    }
+
+    function elementDrag(e) {
+      if (!isDragging) return;
+      
+      e.preventDefault();
+      
+      // 使用 requestAnimationFrame 优化性能
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      
+      animationFrameId = requestAnimationFrame(() => {
+      pos1 = pos3 - e.clientX;
+      pos2 = pos4 - e.clientY;
+      pos3 = e.clientX;
+      pos4 = e.clientY;
+        
+        // 直接使用 transform 而不是 top/left，性能更好
+        const newTop = element.offsetTop - pos2;
+        const newLeft = element.offsetLeft - pos1;
+        
+        element.style.top = newTop + 'px';
+        element.style.left = newLeft + 'px';
+      });
+    }
+
+    function closeDragElement() {
+      isDragging = false;
+      document.onmouseup = null;
+      document.onmousemove = null;
+      
+      // 取消未完成的动画帧
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+      }
+      
+      // 恢复样式
+      element.style.cursor = 'move';
+      element.style.zIndex = '';
+      element.style.transition = ''; // 恢复过渡动画
+      
+      // 拖动结束后才更新连线（而不是拖动过程中）
+      if (typeof onDragEnd === 'function') {
+        // 使用 setTimeout 确保 DOM 更新完成
+        setTimeout(() => {
+          onDragEnd();
+        }, 0);
+      }
+    }
+  }
+}
+