collabdocchat 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "collabdocchat",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "开源的实时协作文档聊天平台 - 集成任务管理、多人文档编辑、智能点名功能",
   "main": "./server/index.js",
   "type": "module",

package/scripts/refactor-step1.js

@@ -0,0 +1,32 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const filePath = path.join(__dirname, '../src/pages/admin-dashboard.js');
+
+console.log('读取文件...');
+let content = fs.readFileSync(filePath, 'utf8');
+
+// 1. 从导航菜单中删除 AI助手、数据导出、协作白板、集成管理
+console.log('删除菜单项...');
+content = content.replace(/<button class="nav-item" data-view="ai">[\s\S]*?AI助手[\s\S]*?<\/button>\s*/g, '');
+content = content.replace(/<button class="nav-item" data-view="export">[\s\S]*?数据导出[\s\S]*?<\/button>\s*/g, '');
+content = content.replace(/<button class="nav-item" data-view="whiteboard">[\s\S]*?协作白板[\s\S]*?<\/button>\s*/g, '');
+content = content.replace(/<button class="nav-item" data-view="integrations">[\s\S]*?集成管理[\s\S]*?<\/button>\s*/g, '');
+
+// 2. 从 switch 语句中删除对应的 case
+console.log('删除 switch case...');
+content = content.replace(/case 'integrations':[\s\S]*?await renderIntegrationsView\(contentArea\);[\s\S]*?break;\s*/g, '');
+
+// 3. 删除 renderIntegrationsView 函数
+console.log('删除集成管理函数...');
+content = content.replace(/\/\/ 集成管理[\s\S]*?async function renderIntegrationsView\(container\)[\s\S]*?}\s*}\s*;[\s\S]*?}\s*}\s*;/g, '');
+
+console.log('写入文件...');
+fs.writeFileSync(filePath, content, 'utf8');
+
+console.log('✅ 第一步完成！已删除不需要的菜单项');
+

package/scripts/refactor-step2.js

@@ -0,0 +1,255 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const filePath = path.join(__dirname, '../src/pages/admin-dashboard.js');
+
+console.log('读取文件...');
+let content = fs.readFileSync(filePath, 'utf8');
+
+// 在群聊视图的按钮组中添加 AI助手 和 协作白板
+console.log('在群聊中添加 AI助手 和 协作白板按钮...');
+const chatHeaderPattern = /(<h2>群聊 - \$\{currentGroup\.name\}<\/h2>\s*<div style="display: flex; gap: 10px;">[\s\S]*?<button class="btn-secondary" id="manageMuteBtn">个人禁言<\/button>)/;
+const chatHeaderReplacement = `$1
+          <button class="btn-secondary" id="openAIBtn">🤖 AI助手</button>
+          <button class="btn-secondary" id="openWhiteboardBtn">🎨 协作白板</button>`;
+
+content = content.replace(chatHeaderPattern, chatHeaderReplacement);
+
+// 在群聊视图中添加 AI助手和白板的模态框
+console.log('添加 AI助手和白板模态框...');
+const chatContainerPattern = /(<div id="manageMuteModal" class="modal hidden">[\s\S]*?<\/div>\s*<\/div>)/;
+const chatContainerReplacement = `$1
+      
+      <!-- AI助手模态框 -->
+      <div id="aiModal" class="modal hidden">
+        <div class="modal-content" style="max-width: 800px; height: 80vh;">
+          <div class="modal-header">
+            <h3>🤖 AI助手</h3>
+            <button class="modal-close" id="closeAIModal">&times;</button>
+          </div>
+          <div class="ai-chat-container" style="display: flex; flex-direction: column; height: calc(100% - 60px);">
+            <div class="ai-chat" id="aiChatMessages" style="flex: 1; overflow-y: auto; padding: 20px; background: var(--bg-secondary);">
+              <div class="ai-message ai">
+                <p>你好！我是AI助手，有什么可以帮助你的吗？</p>
+                <p>你可以问我关于文档、任务、群组的问题。</p>
+              </div>
+            </div>
+            <div class="ai-input-container" style="padding: 15px; border-top: 1px solid var(--border);">
+              <textarea id="aiInputText" placeholder="向AI助手提问..." rows="3" style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; resize: none;"></textarea>
+              <button class="btn-primary" id="aiSendBtnModal" style="margin-top: 10px; width: 100%;">发送</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 协作白板模态框 -->
+      <div id="whiteboardModal" class="modal hidden">
+        <div class="modal-content" style="max-width: 95vw; max-height: 90vh; width: 1400px;">
+          <div class="modal-header">
+            <h3>🎨 协作白板</h3>
+            <div style="display: flex; gap: 10px;">
+              <button class="btn-secondary" id="clearCanvasBtn">清空画布</button>
+              <button class="btn-primary" id="saveCanvasBtn">保存白板</button>
+              <button class="modal-close" id="closeWhiteboardModal">&times;</button>
+            </div>
+          </div>
+          <div class="whiteboard-container" style="padding: 15px;">
+            <div class="whiteboard-toolbar" style="display: flex; gap: 10px; margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 8px;">
+              <button class="tool-btn active" data-tool="pen" style="padding: 8px 15px; border: 2px solid var(--primary); border-radius: 6px; background: var(--primary); color: white;">✏️ 画笔</button>
+              <button class="tool-btn" data-tool="eraser" style="padding: 8px 15px; border: 2px solid var(--border); border-radius: 6px; background: transparent;">🧹 橡皮擦</button>
+              <input type="color" id="colorPickerCanvas" value="#000000" title="颜色" style="width: 50px; height: 40px; border: none; border-radius: 6px; cursor: pointer;">
+              <input type="range" id="brushSizeCanvas" min="1" max="20" value="3" title="画笔大小" style="width: 150px;">
+              <span id="brushSizeLabel" style="padding: 8px 15px;">大小: 3</span>
+            </div>
+            <canvas id="whiteboardCanvas" width="1300" height="600" style="border: 2px solid var(--border); background: white; cursor: crosshair; border-radius: 8px; display: block;"></canvas>
+          </div>
+        </div>
+      </div>`;
+
+content = content.replace(chatContainerPattern, chatContainerReplacement);
+
+// 在群聊视图函数末尾添加按钮事件处理
+console.log('添加按钮事件处理...');
+const chatEndPattern = /(sendBtn\.addEventListener\('click', sendMessage\);[\s\S]*?messageInput\.addEventListener\('keypress', \(e\) => \{[\s\S]*?if \(e\.key === 'Enter'\) sendMessage\(\);[\s\S]*?\}\);)/;
+const chatEndReplacement = `$1
+
+    // AI助手按钮
+    document.getElementById('openAIBtn').addEventListener('click', () => {
+      document.getElementById('aiModal').classList.remove('hidden');
+    });
+
+    document.getElementById('closeAIModal').addEventListener('click', () => {
+      document.getElementById('aiModal').classList.add('hidden');
+    });
+
+    document.getElementById('aiSendBtnModal').addEventListener('click', async () => {
+      const input = document.getElementById('aiInputText');
+      const question = input.value.trim();
+      if (!question) return;
+
+      const chatMessages = document.getElementById('aiChatMessages');
+      
+      // 显示用户消息
+      const userMsg = document.createElement('div');
+      userMsg.className = 'ai-message user';
+      userMsg.style.cssText = 'background: var(--primary); color: white; padding: 12px 16px; border-radius: 12px; margin: 10px 0; max-width: 70%; margin-left: auto; text-align: right;';
+      userMsg.textContent = question;
+      chatMessages.appendChild(userMsg);
+      input.value = '';
+
+      // 显示加载中
+      const loadingMsg = document.createElement('div');
+      loadingMsg.className = 'ai-message ai loading';
+      loadingMsg.style.cssText = 'background: var(--bg-tertiary); padding: 12px 16px; border-radius: 12px; margin: 10px 0; max-width: 70%;';
+      loadingMsg.textContent = '思考中...';
+      chatMessages.appendChild(loadingMsg);
+      chatMessages.scrollTop = chatMessages.scrollHeight;
+
+      try {
+        const token = localStorage.getItem('token');
+        const response = await fetch('http://localhost:3000/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.className = 'ai-message ai';
+        aiMsg.style.cssText = 'background: var(--bg-tertiary); padding: 12px 16px; border-radius: 12px; margin: 10px 0; max-width: 70%;';
+        aiMsg.textContent = result.answer || '抱歉，我无法回答这个问题。';
+        chatMessages.appendChild(aiMsg);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+      } catch (error) {
+        loadingMsg.remove();
+        const errorMsg = document.createElement('div');
+        errorMsg.className = 'ai-message ai error';
+        errorMsg.style.cssText = 'background: var(--danger); color: white; padding: 12px 16px; border-radius: 12px; margin: 10px 0; max-width: 70%;';
+        errorMsg.textContent = '抱歉，发生了错误: ' + error.message;
+        chatMessages.appendChild(errorMsg);
+      }
+    });
+
+    // 协作白板按钮
+    document.getElementById('openWhiteboardBtn').addEventListener('click', () => {
+      document.getElementById('whiteboardModal').classList.remove('hidden');
+      initWhiteboard();
+    });
+
+    document.getElementById('closeWhiteboardModal').addEventListener('click', () => {
+      document.getElementById('whiteboardModal').classList.add('hidden');
+    });
+
+    function initWhiteboard() {
+      const canvas = document.getElementById('whiteboardCanvas');
+      if (!canvas) return;
+      
+      const ctx = canvas.getContext('2d');
+      let isDrawing = false;
+      let currentTool = 'pen';
+      let currentColor = '#000000';
+      let brushSize = 3;
+      let lastX = 0;
+      let lastY = 0;
+
+      // 工具切换
+      document.querySelectorAll('.tool-btn').forEach(btn => {
+        btn.onclick = () => {
+          document.querySelectorAll('.tool-btn').forEach(b => {
+            b.style.background = 'transparent';
+            b.style.borderColor = 'var(--border)';
+            b.style.color = 'inherit';
+            b.classList.remove('active');
+          });
+          btn.style.background = 'var(--primary)';
+          btn.style.borderColor = 'var(--primary)';
+          btn.style.color = 'white';
+          btn.classList.add('active');
+          currentTool = btn.dataset.tool;
+        };
+      });
+
+      const colorPicker = document.getElementById('colorPickerCanvas');
+      if (colorPicker) {
+        colorPicker.onchange = (e) => {
+          currentColor = e.target.value;
+        };
+      }
+
+      const brushSizeInput = document.getElementById('brushSizeCanvas');
+      const brushSizeLabel = document.getElementById('brushSizeLabel');
+      if (brushSizeInput && brushSizeLabel) {
+        brushSizeInput.oninput = (e) => {
+          brushSize = e.target.value;
+          brushSizeLabel.textContent = \`大小: \${brushSize}\`;
+        };
+      }
+
+      // 绘画功能
+      canvas.onmousedown = (e) => {
+        isDrawing = true;
+        const rect = canvas.getBoundingClientRect();
+        lastX = e.clientX - rect.left;
+        lastY = e.clientY - rect.top;
+      };
+
+      canvas.onmousemove = (e) => {
+        if (!isDrawing) return;
+        
+        const rect = canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        ctx.beginPath();
+        ctx.moveTo(lastX, lastY);
+        ctx.lineTo(x, y);
+        ctx.strokeStyle = currentTool === 'eraser' ? '#ffffff' : currentColor;
+        ctx.lineWidth = brushSize;
+        ctx.lineCap = 'round';
+        ctx.stroke();
+
+        lastX = x;
+        lastY = y;
+      };
+
+      canvas.onmouseup = () => {
+        isDrawing = false;
+      };
+
+      canvas.onmouseleave = () => {
+        isDrawing = false;
+      };
+
+      // 清空画布
+      document.getElementById('clearCanvasBtn').onclick = () => {
+        if (confirm('确定要清空画布吗？')) {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+      };
+
+      // 保存白板
+      document.getElementById('saveCanvasBtn').onclick = () => {
+        const dataURL = canvas.toDataURL('image/png');
+        const link = document.createElement('a');
+        link.download = \`whiteboard-\${Date.now()}.png\`;
+        link.href = dataURL;
+        link.click();
+        alert('白板已保存！');
+      };
+    }`;
+
+content = content.replace(chatEndPattern, chatEndReplacement);
+
+console.log('写入文件...');
+fs.writeFileSync(filePath, content, 'utf8');
+
+console.log('✅ 第二步完成！已在群聊中添加 AI助手 和 协作白板');
+

package/scripts/refactor-step3.js

@@ -0,0 +1,137 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const filePath = path.join(__dirname, '../src/pages/admin-dashboard.js');
+
+console.log('读取文件...');
+let content = fs.readFileSync(filePath, 'utf8');
+
+// 在任务卡片中添加"查看详细"按钮
+console.log('添加查看详细按钮...');
+const taskCardPattern = /(taskCard\.innerHTML = `[\s\S]*?<button class="btn-danger btn-sm" data-id="\$\{task\._id\}" data-action="delete-task")/;
+const taskCardReplacement = `taskCard.innerHTML = \`
+          <div style="display: flex; justify-content: space-between; align-items: start;">
+            <div style="flex: 1;">
+              <h3>\${task.title}</h3>
+              <p>\${task.description || '无描述'}</p>
+              <div class="task-meta">
+                <span class="status-badge">\${getStatusText(task.status)}</span>
+                <span>截止: \${task.deadline ? new Date(task.deadline).toLocaleDateString() : '无'}</span>
+              </div>
+            </div>
+            <div style="display: flex; gap: 10px;">
+              <button class="btn-primary btn-sm" data-id="\${task._id}" data-action="view-task" title="查看详细">📋 查看详细</button>
+              <button class="btn-danger btn-sm" data-id="\${task._id}" data-action="delete-task"`;
+
+content = content.replace(taskCardPattern, taskCardReplacement);
+
+// 在任务列表后添加任务详情模态框
+console.log('添加任务详情模态框...');
+const taskModalPattern = /(<div id="createTaskModal" class="modal hidden">[\s\S]*?<\/div>\s*<\/div>)/;
+const taskModalReplacement = `$1
+      
+      <!-- 任务详情模态框 -->
+      <div id="taskDetailModal" class="modal hidden">
+        <div class="modal-content" style="max-width: 800px;">
+          <div class="modal-header">
+            <h3>📋 任务详情</h3>
+            <button class="modal-close" id="closeTaskDetailModal">&times;</button>
+          </div>
+          <div class="modal-body" id="taskDetailContent" style="padding: 20px;">
+            <!-- 任务详情内容 -->
+          </div>
+        </div>
+      </div>`;
+
+content = content.replace(taskModalPattern, taskModalReplacement);
+
+// 在删除任务事件后添加查看详细事件
+console.log('添加查看详细事件...');
+const deleteTaskPattern = /(\/\/ 添加删除任务事件[\s\S]*?document\.querySelectorAll\('\[data-action="delete-task"\]'\)\.forEach\(btn => \{[\s\S]*?\}\);[\s\S]*?\}\);)/;
+const deleteTaskReplacement = `$1
+
+      // 添加查看详细事件
+      document.querySelectorAll('[data-action="view-task"]').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          const taskId = btn.dataset.id;
+          const task = result.tasks.find(t => t._id === taskId);
+          
+          if (task) {
+            const detailContent = document.getElementById('taskDetailContent');
+            detailContent.innerHTML = \`
+              <div class="task-detail">
+                <div class="detail-section">
+                  <h4>📌 任务标题</h4>
+                  <p style="font-size: 18px; font-weight: 600; margin: 10px 0;">\${task.title}</p>
+                </div>
+                
+                <div class="detail-section" style="margin-top: 20px;">
+                  <h4>📝 任务描述</h4>
+                  <p style="margin: 10px 0; line-height: 1.6;">\${task.description || '无描述'}</p>
+                </div>
+                
+                <div class="detail-section" style="margin-top: 20px;">
+                  <h4>📊 任务状态</h4>
+                  <span class="status-badge" style="display: inline-block; margin: 10px 0; padding: 6px 12px; border-radius: 6px; background: var(--primary); color: white;">\${getStatusText(task.status)}</span>
+                </div>
+                
+                <div class="detail-section" style="margin-top: 20px;">
+                  <h4>📅 截止日期</h4>
+                  <p style="margin: 10px 0;">\${task.deadline ? new Date(task.deadline).toLocaleString() : '无截止日期'}</p>
+                </div>
+                
+                <div class="detail-section" style="margin-top: 20px;">
+                  <h4>👥 分配给</h4>
+                  <div style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;">
+                    \${task.assignedTo && task.assignedTo.length > 0 ? 
+                      task.assignedTo.map(user => \`
+                        <div style="display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-secondary); border-radius: 8px;">
+                          <div class="avatar" style="width: 30px; height: 30px; font-size: 14px;">\${user.username?.[0]?.toUpperCase() || '?'}</div>
+                          <span>\${user.username || '未知用户'}</span>
+                        </div>
+                      \`).join('') : 
+                      '<p>未分配</p>'
+                    }
+                  </div>
+                </div>
+                
+                <div class="detail-section" style="margin-top: 20px;">
+                  <h4>🕐 创建时间</h4>
+                  <p style="margin: 10px 0;">\${new Date(task.createdAt).toLocaleString()}</p>
+                </div>
+                
+                <div class="detail-section" style="margin-top: 20px;">
+                  <h4>🔄 更新时间</h4>
+                  <p style="margin: 10px 0;">\${new Date(task.updatedAt).toLocaleString()}</p>
+                </div>
+              </div>
+            \`;
+            
+            document.getElementById('taskDetailModal').classList.remove('hidden');
+          }
+        });
+      });`;
+
+content = content.replace(deleteTaskPattern, deleteTaskReplacement);
+
+// 添加关闭任务详情模态框的事件
+console.log('添加关闭模态框事件...');
+const closeTaskModalPattern = /(document\.getElementById\('closeTaskModal'\)\.addEventListener\('click', \(\) => \{[\s\S]*?document\.getElementById\('createTaskModal'\)\.classList\.add\('hidden'\);[\s\S]*?\}\);)/;
+const closeTaskModalReplacement = `$1
+
+    document.getElementById('closeTaskDetailModal').addEventListener('click', () => {
+      document.getElementById('taskDetailModal').classList.add('hidden');
+    });`;
+
+content = content.replace(closeTaskModalPattern, closeTaskModalReplacement);
+
+console.log('写入文件...');
+fs.writeFileSync(filePath, content, 'utf8');
+
+console.log('✅ 第三步完成！已为任务管理添加查看详细功能');
+

package/scripts/refactor-step4.js

@@ -0,0 +1,183 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const filePath = path.join(__dirname, '../src/pages/admin-dashboard.js');
+
+console.log('读取文件...');
+let content = fs.readFileSync(filePath, 'utf8');
+
+// 替换知识库功能为完整实现
+console.log('完善知识库功能...');
+const knowledgePattern = /\/\/ 知识库管理[\s\S]*?async function renderKnowledgeView\(container\)[\s\S]*?container\.innerHTML = '<div class="empty-state">知识库功能开发中\.\.\.<\/div>';[\s\S]*?}/;
+const knowledgeReplacement = `// 知识库管理
+  async function renderKnowledgeView(container) {
+    if (!currentGroup) {
+      container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
+      return;
+    }
+
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(\`http://localhost:3000/api/knowledge/group/\${currentGroup._id}\`, {
+        headers: { 'Authorization': \`Bearer \${token}\` }
+      });
+      const result = await response.json();
+      const knowledgeItems = result.data || [];
+
+      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">
+            <h3 id="modalTitle">创建知识条目</h3>
+            <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 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="closeKnowledgeModal" 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;';
+          card.innerHTML = \`
+            <h3 style="margin: 0 0 10px 0; font-size: 18px;">\${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.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('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:3000/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('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
+        };
+
+        try {
+          const editId = e.target.dataset.editId;
+          const url = editId 
+            ? \`http://localhost:3000/api/knowledge/\${editId}\`
+            : 'http://localhost:3000/api/knowledge';
+          const method = editId ? 'PUT' : 'POST';
+
+          await fetch(url, {
+            method,
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': \`Bearer \${token}\`
+            },
+            body: JSON.stringify(data)
+          });
+
+          alert(editId ? '更新成功！' : '创建成功！');
+          document.getElementById('knowledgeModal').classList.add('hidden');
+          await renderKnowledgeView(container);
+        } catch (error) {
+          alert('操作失败: ' + error.message);
+        }
+      });
+    } catch (error) {
+      container.innerHTML = \`<div class="empty-state">加载失败: \${error.message}</div>\`;
+    }
+  }`;
+
+content = content.replace(knowledgePattern, knowledgeReplacement);
+
+console.log('写入文件...');
+fs.writeFileSync(filePath, content, 'utf8');
+
+console.log('✅ 第四步完成！已完善知识库功能');
+