collabdocchat 2.4.3 → 2.4.4

package/package.json

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

package/scripts/add-button-hover.js

@@ -0,0 +1,56 @@
+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');
+
+// 查找设置按钮的点击事件位置
+const settingsBtnPattern = /document\.getElementById\('settingsBtn'\)\.addEventListener\('click', \(\) => \{/;
+
+if (settingsBtnPattern.test(content)) {
+  // 在设置按钮点击事件之前添加悬停效果
+  const hoverEffects = `
+  // 设置和帮助按钮悬停效果
+  const settingsBtn = document.getElementById('settingsBtn');
+  const helpBtn = document.getElementById('helpBtn');
+  
+  settingsBtn.addEventListener('mouseenter', () => {
+    settingsBtn.style.transform = 'translateY(-2px)';
+    settingsBtn.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.5)';
+  });
+  settingsBtn.addEventListener('mouseleave', () => {
+    settingsBtn.style.transform = 'translateY(0)';
+    settingsBtn.style.boxShadow = '0 2px 8px rgba(102, 126, 234, 0.3)';
+  });
+  
+  helpBtn.addEventListener('mouseenter', () => {
+    helpBtn.style.transform = 'translateY(-2px)';
+    helpBtn.style.boxShadow = '0 4px 12px rgba(240, 147, 251, 0.5)';
+  });
+  helpBtn.addEventListener('mouseleave', () => {
+    helpBtn.style.transform = 'translateY(0)';
+    helpBtn.style.boxShadow = '0 2px 8px rgba(240, 147, 251, 0.3)';
+  });
+
+  `;
+  
+  content = content.replace(
+    settingsBtnPattern,
+    hoverEffects + "document.getElementById('settingsBtn').addEventListener('click', () => {"
+  );
+  
+  console.log('✅ 悬停效果已添加');
+} else {
+  console.log('⚠️  未找到设置按钮点击事件');
+}
+
+fs.writeFileSync(filePath, content, 'utf8');
+
+console.log('\n✅ 完成！按钮现在有悬停动画效果');
+

package/scripts/beautify-buttons.js

@@ -0,0 +1,45 @@
+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');
+
+// 替换设置和帮助按钮
+const oldButtonsSection = `        <div class="sidebar-footer">
+          <button class="sidebar-footer-btn" id="settingsBtn">
+            <span class="icon">⚙️</span> 设置
+          </button>
+          <button class="sidebar-footer-btn" id="helpBtn">
+            <span class="icon">❓</span> 帮助
+          </button>
+        </div>`;
+
+const newButtonsSection = `        <div class="sidebar-footer" style="display: flex; gap: 8px; padding: 0 10px;">
+          <button class="sidebar-footer-btn" id="settingsBtn" style="flex: 1; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); display: flex; align-items: center; justify-content: center; gap: 6px;">
+            <span class="icon" style="font-size: 18px;">⚙️</span>
+            <span>设置</span>
+          </button>
+          <button class="sidebar-footer-btn" id="helpBtn" style="flex: 1; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border: none; padding: 12px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(240, 147, 251, 0.3); display: flex; align-items: center; justify-content: center; gap: 6px;">
+            <span class="icon" style="font-size: 18px;">❓</span>
+            <span>帮助</span>
+          </button>
+        </div>`;
+
+content = content.replace(oldButtonsSection, newButtonsSection);
+console.log('✅ 设置和帮助按钮已美化');
+
+fs.writeFileSync(filePath, content, 'utf8');
+
+console.log('\n✅ 美化完成！');
+console.log('\n变更内容：');
+console.log('1. 设置按钮：紫色渐变背景 + 白色文字 + 阴影');
+console.log('2. 帮助按钮：粉色渐变背景 + 白色文字 + 阴影');
+console.log('3. 按钮并排显示，各占50%宽度');
+console.log('4. 图标和文字居中对齐');
+

package/scripts/beautify-ui.js

@@ -0,0 +1,267 @@
+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('美化设置和帮助按钮，优化AI助手界面...');
+let content = fs.readFileSync(filePath, 'utf8');
+
+// 1. 查找并替换设置和帮助按钮的样式
+const oldButtons = `        <button class="nav-btn" id="settingsBtn">⚙️ 设置</button>
+        <button class="nav-btn" id="helpBtn">❓ 帮助</button>`;
+
+const newButtons = `        <button class="nav-btn" id="settingsBtn" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);">⚙️ 设置</button>
+        <button class="nav-btn" id="helpBtn" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(240, 147, 251, 0.3); margin-left: 10px;">❓ 帮助</button>`;
+
+if (content.includes(oldButtons)) {
+  content = content.replace(oldButtons, newButtons);
+  console.log('✅ 设置和帮助按钮样式已更新');
+} else {
+  console.log('⚠️  未找到设置和帮助按钮，尝试其他匹配方式...');
+}
+
+// 2. 删除AI助手模态框底部的输入框和提示
+const oldAIInput = `            <!-- 输入区域 -->
+            <div class="ai-input-container" style="padding: 20px; border-top: 1px solid var(--border); background: var(--bg-secondary);">
+              <div style="display: flex; gap: 12px; align-items: end;">
+                <textarea id="aiInputText" placeholder="输入你的问题..." rows="1" style="flex: 1; padding: 12px 16px; border: 2px solid var(--border); border-radius: 12px; resize: none; font-size: 14px; transition: border-color 0.2s; max-height: 120px;"></textarea>
+                <button class="btn-primary" id="aiSendBtnModal" style="padding: 12px 24px; border-radius: 12px; font-size: 15px; font-weight: 600; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; cursor: pointer; transition: transform 0.2s;">
+                  <span style="display: flex; align-items: center; gap: 6px;">
+                    <span>发送</span>
+                    <span>🚀</span>
+                  </span>
+                </button>
+              </div>
+              <div style="margin-top: 10px; font-size: 11px; color: var(--text-tertiary); text-align: center;">
+                💡 提示：按 Enter 发送，Shift + Enter 换行
+              </div>
+            </div>`;
+
+const newAIInput = `            <!-- 输入区域已移除，使用快捷问题按钮 -->`;
+
+content = content.replace(oldAIInput, newAIInput);
+console.log('✅ AI助手输入框已删除');
+
+// 3. 优化AI助手的快捷问题按钮样式
+const oldQuickButtons = `              <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+                <button class="quick-question-btn" data-question="如何创建一个新文档？" style="padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; font-size: 12px; cursor: pointer; transition: all 0.2s;">📄 如何创建文档？</button>
+                <button class="quick-question-btn" data-question="如何邀请成员加入群组？" style="padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; font-size: 12px; cursor: pointer; transition: all 0.2s;">👥 如何邀请成员？</button>
+                <button class="quick-question-btn" data-question="如何使用工作流功能？" style="padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; font-size: 12px; cursor: pointer; transition: all 0.2s;">⚙️ 工作流使用？</button>
+                <button class="quick-question-btn" data-question="如何备份数据？" style="padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; font-size: 12px; cursor: pointer; transition: all 0.2s;">💾 如何备份？</button>
+              </div>`;
+
+const newQuickButtons = `              <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+                <button class="quick-question-btn" data-question="如何创建一个新文档？" style="padding: 12px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); display: flex; align-items: center; gap: 8px;">
+                  <span style="font-size: 20px;">📄</span>
+                  <span>如何创建文档？</span>
+                </button>
+                <button class="quick-question-btn" data-question="如何邀请成员加入群组？" style="padding: 12px 16px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(240, 147, 251, 0.3); display: flex; align-items: center; gap: 8px;">
+                  <span style="font-size: 20px;">👥</span>
+                  <span>如何邀请成员？</span>
+                </button>
+                <button class="quick-question-btn" data-question="如何使用工作流功能？" style="padding: 12px 16px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3); display: flex; align-items: center; gap: 8px;">
+                  <span style="font-size: 20px;">⚙️</span>
+                  <span>工作流使用？</span>
+                </button>
+                <button class="quick-question-btn" data-question="如何备份数据？" style="padding: 12px 16px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(250, 112, 154, 0.3); display: flex; align-items: center; gap: 8px;">
+                  <span style="font-size: 20px;">💾</span>
+                  <span>如何备份？</span>
+                </button>
+              </div>`;
+
+content = content.replace(oldQuickButtons, newQuickButtons);
+console.log('✅ 快捷问题按钮已美化');
+
+// 4. 更新快捷问题按钮的事件处理，移除输入框相关代码
+const oldQuickBtnHandler = `    // 快捷问题按钮
+    document.querySelectorAll('.quick-question-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.getElementById('aiInputText').value = btn.dataset.question;
+        document.getElementById('aiSendBtnModal').click();
+      });
+      btn.addEventListener('mouseenter', (e) => {
+        e.target.style.background = 'var(--primary)';
+        e.target.style.color = 'white';
+        e.target.style.transform = 'translateY(-2px)';
+      });
+      btn.addEventListener('mouseleave', (e) => {
+        e.target.style.background = 'var(--bg)';
+        e.target.style.color = 'inherit';
+        e.target.style.transform = 'translateY(0)';
+      });
+    });`;
+
+const newQuickBtnHandler = `    // 快捷问题按钮 - 直接发送问题
+    document.querySelectorAll('.quick-question-btn').forEach(btn => {
+      btn.addEventListener('click', async () => {
+        const question = btn.dataset.question;
+        const chatMessages = document.getElementById('aiChatMessages');
+        
+        // 显示用户问题
+        const userMsg = document.createElement('div');
+        userMsg.className = 'ai-message user';
+        userMsg.textContent = question;
+        userMsg.style.cssText = 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 18px; border-radius: 18px 18px 4px 18px; margin: 10px 0; max-width: 75%; margin-left: auto; text-align: right; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); animation: slideInRight 0.3s ease;';
+        chatMessages.appendChild(userMsg);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        
+        // 发送到AI
+        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 })
+          });
+          
+          const data = await response.json();
+          
+          // 显示AI回复
+          const aiMsg = document.createElement('div');
+          aiMsg.className = 'ai-message ai';
+          aiMsg.textContent = data.answer || '抱歉，我现在无法回答这个问题。';
+          aiMsg.style.cssText = 'background: var(--bg-secondary); padding: 15px 18px; border-radius: 18px 18px 18px 4px; margin: 10px 0; max-width: 75%; border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.05); animation: slideInLeft 0.3s ease; line-height: 1.6;';
+          chatMessages.appendChild(aiMsg);
+          chatMessages.scrollTop = chatMessages.scrollHeight;
+        } catch (error) {
+          const errorMsg = document.createElement('div');
+          errorMsg.className = 'ai-message ai';
+          errorMsg.textContent = '抱歉，发生了错误：' + error.message;
+          errorMsg.style.cssText = 'background: var(--bg-secondary); padding: 15px 18px; border-radius: 18px 18px 18px 4px; margin: 10px 0; max-width: 75%; border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.05); animation: slideInLeft 0.3s ease; line-height: 1.6;';
+          chatMessages.appendChild(errorMsg);
+          chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+      });
+      
+      // 悬停效果
+      btn.addEventListener('mouseenter', (e) => {
+        e.target.style.transform = 'translateY(-3px) scale(1.02)';
+        e.target.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
+      });
+      btn.addEventListener('mouseleave', (e) => {
+        e.target.style.transform = 'translateY(0) scale(1)';
+        const gradient = e.target.style.background;
+        if (gradient.includes('667eea')) {
+          e.target.style.boxShadow = '0 2px 8px rgba(102, 126, 234, 0.3)';
+        } else if (gradient.includes('f093fb')) {
+          e.target.style.boxShadow = '0 2px 8px rgba(240, 147, 251, 0.3)';
+        } else if (gradient.includes('4facfe')) {
+          e.target.style.boxShadow = '0 2px 8px rgba(79, 172, 254, 0.3)';
+        } else {
+          e.target.style.boxShadow = '0 2px 8px rgba(250, 112, 154, 0.3)';
+        }
+      });
+    });`;
+
+content = content.replace(oldQuickBtnHandler, newQuickBtnHandler);
+console.log('✅ 快捷问题按钮事件已更新');
+
+// 5. 删除不再需要的输入框相关代码
+const inputRelatedCode = [
+  `    // AI输入框自动调整高度
+    const aiInput = document.getElementById('aiInputText');
+    aiInput.addEventListener('input', () => {
+      aiInput.style.height = 'auto';
+      aiInput.style.height = aiInput.scrollHeight + 'px';
+    });
+
+    // 支持 Enter 发送，Shift+Enter 换行
+    aiInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        document.getElementById('aiSendBtnModal').click();
+      }
+    });
+
+    // 输入框聚焦效果
+    aiInput.addEventListener('focus', () => {
+      aiInput.style.borderColor = 'var(--primary)';
+    });
+    aiInput.addEventListener('blur', () => {
+      aiInput.style.borderColor = 'var(--border)';
+    });
+
+    // 发送按钮悬停效果
+    const aiSendBtn = document.getElementById('aiSendBtnModal');
+    aiSendBtn.addEventListener('mouseenter', () => {
+      aiSendBtn.style.transform = 'scale(1.05)';
+    });
+    aiSendBtn.addEventListener('mouseleave', () => {
+      aiSendBtn.style.transform = 'scale(1)';
+    });
+
+    document.getElementById('aiSendBtnModal').addEventListener('click', async () => {`,
+  `    document.getElementById('aiSendBtnModal').addEventListener('click', async () => {
+      const question = document.getElementById('aiInputText').value.trim();
+      if (!question) return;
+
+      const chatMessages = document.getElementById('aiChatMessages');
+      
+      // 显示用户消息
+      const userMsg = document.createElement('div');
+      userMsg.className = 'ai-message user';
+      userMsg.textContent = question;
+      userMsg.style.cssText = 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 18px; border-radius: 18px 18px 4px 18px; margin: 10px 0; max-width: 75%; margin-left: auto; text-align: right; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); animation: slideInRight 0.3s ease;';
+      chatMessages.appendChild(userMsg);
+      
+      // 清空输入框
+      document.getElementById('aiInputText').value = '';
+      document.getElementById('aiInputText').style.height = 'auto';
+      
+      chatMessages.scrollTop = chatMessages.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 })
+        });
+
+        const data = await response.json();
+        
+        // 显示AI回复
+        const aiMsg = document.createElement('div');
+        aiMsg.className = 'ai-message ai';
+        aiMsg.textContent = data.answer || '抱歉，我现在无法回答这个问题。';
+        aiMsg.style.cssText = 'background: var(--bg-secondary); padding: 15px 18px; border-radius: 18px 18px 18px 4px; margin: 10px 0; max-width: 75%; border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.05); animation: slideInLeft 0.3s ease; line-height: 1.6;';
+        chatMessages.appendChild(aiMsg);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+      } catch (error) {
+        const errorMsg = document.createElement('div');
+        errorMsg.className = 'ai-message ai';
+        errorMsg.textContent = '抱歉，发生了错误：' + error.message;
+        errorMsg.style.cssText = 'background: var(--bg-secondary); padding: 15px 18px; border-radius: 18px 18px 18px 4px; margin: 10px 0; max-width: 75%; border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.05); animation: slideInLeft 0.3s ease; line-height: 1.6;';
+        chatMessages.appendChild(errorMsg);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+      }
+    });`
+];
+
+inputRelatedCode.forEach(code => {
+  if (content.includes(code)) {
+    content = content.replace(code, '');
+    console.log('✅ 已删除输入框相关代码');
+  }
+});
+
+fs.writeFileSync(filePath, content, 'utf8');
+
+console.log('\n✅ 所有美化完成！');
+console.log('\n变更内容：');
+console.log('1. 设置按钮：紫色渐变 + 阴影');
+console.log('2. 帮助按钮：粉色渐变 + 阴影');
+console.log('3. AI助手：删除底部输入框');
+console.log('4. 快捷问题：2x2网格布局，渐变色按钮');
+console.log('5. 点击快捷问题直接发送到AI');
+

package/scripts/find-buttons.js

@@ -0,0 +1,20 @@
+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');
+const content = fs.readFileSync(filePath, 'utf8');
+const lines = content.split('\n');
+
+console.log('搜索设置和帮助按钮...\n');
+
+lines.forEach((line, i) => {
+  if ((line.includes('设置') || line.includes('帮助')) && 
+      (line.includes('btn') || line.includes('button') || line.includes('nav-btn'))) {
+    console.log(`第 ${i + 1} 行: ${line.trim()}`);
+  }
+});
+

package/scripts/find-sidebar-buttons.js

@@ -0,0 +1,21 @@
+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');
+const content = fs.readFileSync(filePath, 'utf8');
+const lines = content.split('\n');
+
+console.log('搜索侧边栏底部按钮...\n');
+
+lines.forEach((line, i) => {
+  if (line.includes('退出登录') || 
+      (line.includes('⚙️') && line.includes('设置')) ||
+      (line.includes('❓') && line.includes('帮助'))) {
+    console.log(`第 ${i + 1} 行: ${line.trim()}`);
+  }
+});
+

package/src/pages/admin-dashboard.js

@@ -66,12 +66,14 @@ export function renderAdminDashboard(user, wsService) {
           </button>
           </nav>
 
-        <div class="sidebar-footer">
-          <button class="sidebar-footer-btn" id="settingsBtn">
-            <span class="icon">⚙️</span> 设置
+        <div class="sidebar-footer" style="display: flex; gap: 8px; padding: 0 10px;">
+          <button class="sidebar-footer-btn" id="settingsBtn" style="flex: 1; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); display: flex; align-items: center; justify-content: center; gap: 6px;">
+            <span class="icon" style="font-size: 18px;">⚙️</span>
+            <span>设置</span>
           </button>
-          <button class="sidebar-footer-btn" id="helpBtn">
-            <span class="icon">❓</span> 帮助
+          <button class="sidebar-footer-btn" id="helpBtn" style="flex: 1; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border: none; padding: 12px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(240, 147, 251, 0.3); display: flex; align-items: center; justify-content: center; gap: 6px;">
+            <span class="icon" style="font-size: 18px;">❓</span>
+            <span>帮助</span>
           </button>
         </div>
         <button class="btn-logout" id="logoutBtn">退出登录</button>
@@ -99,6 +101,29 @@ export function renderAdminDashboard(user, wsService) {
   });
 
   // 设置按钮
+  
+  // 设置和帮助按钮悬停效果
+  const settingsBtn = document.getElementById('settingsBtn');
+  const helpBtn = document.getElementById('helpBtn');
+  
+  settingsBtn.addEventListener('mouseenter', () => {
+    settingsBtn.style.transform = 'translateY(-2px)';
+    settingsBtn.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.5)';
+  });
+  settingsBtn.addEventListener('mouseleave', () => {
+    settingsBtn.style.transform = 'translateY(0)';
+    settingsBtn.style.boxShadow = '0 2px 8px rgba(102, 126, 234, 0.3)';
+  });
+  
+  helpBtn.addEventListener('mouseenter', () => {
+    helpBtn.style.transform = 'translateY(-2px)';
+    helpBtn.style.boxShadow = '0 4px 12px rgba(240, 147, 251, 0.5)';
+  });
+  helpBtn.addEventListener('mouseleave', () => {
+    helpBtn.style.transform = 'translateY(0)';
+    helpBtn.style.boxShadow = '0 2px 8px rgba(240, 147, 251, 0.3)';
+  });
+
   document.getElementById('settingsBtn').addEventListener('click', () => {
     renderView('settings');
   });
@@ -983,11 +1008,23 @@ export function renderAdminDashboard(user, wsService) {
             <!-- 快捷问题 -->
             <div style="padding: 15px; background: var(--bg-secondary); border-bottom: 1px solid var(--border);">
               <div style="font-size: 12px; color: var(--text-tertiary); margin-bottom: 10px;">💡 快捷问题</div>
-              <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-                <button class="quick-question-btn" data-question="如何创建一个新文档？" style="padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; font-size: 12px; cursor: pointer; transition: all 0.2s;">📄 如何创建文档？</button>
-                <button class="quick-question-btn" data-question="如何邀请成员加入群组？" style="padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; font-size: 12px; cursor: pointer; transition: all 0.2s;">👥 如何邀请成员？</button>
-                <button class="quick-question-btn" data-question="如何使用工作流功能？" style="padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; font-size: 12px; cursor: pointer; transition: all 0.2s;">⚙️ 工作流使用？</button>
-                <button class="quick-question-btn" data-question="如何备份数据？" style="padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; font-size: 12px; cursor: pointer; transition: all 0.2s;">💾 如何备份？</button>
+              <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+                <button class="quick-question-btn" data-question="如何创建一个新文档？" style="padding: 12px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); display: flex; align-items: center; gap: 8px;">
+                  <span style="font-size: 20px;">📄</span>
+                  <span>如何创建文档？</span>
+                </button>
+                <button class="quick-question-btn" data-question="如何邀请成员加入群组？" style="padding: 12px 16px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(240, 147, 251, 0.3); display: flex; align-items: center; gap: 8px;">
+                  <span style="font-size: 20px;">👥</span>
+                  <span>如何邀请成员？</span>
+                </button>
+                <button class="quick-question-btn" data-question="如何使用工作流功能？" style="padding: 12px 16px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3); display: flex; align-items: center; gap: 8px;">
+                  <span style="font-size: 20px;">⚙️</span>
+                  <span>工作流使用？</span>
+                </button>
+                <button class="quick-question-btn" data-question="如何备份数据？" style="padding: 12px 16px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(250, 112, 154, 0.3); display: flex; align-items: center; gap: 8px;">
+                  <span style="font-size: 20px;">💾</span>
+                  <span>如何备份？</span>
+                </button>
               </div>
             </div>
             
@@ -1009,21 +1046,7 @@ export function renderAdminDashboard(user, wsService) {
               </div>
             </div>
             
-            <!-- 输入区域 -->
-            <div class="ai-input-container" style="padding: 20px; border-top: 1px solid var(--border); background: var(--bg-secondary);">
-              <div style="display: flex; gap: 12px; align-items: end;">
-                <textarea id="aiInputText" placeholder="输入你的问题..." rows="1" style="flex: 1; padding: 12px 16px; border: 2px solid var(--border); border-radius: 12px; resize: none; font-size: 14px; transition: border-color 0.2s; max-height: 120px;"></textarea>
-                <button class="btn-primary" id="aiSendBtnModal" style="padding: 12px 24px; border-radius: 12px; font-size: 15px; font-weight: 600; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; cursor: pointer; transition: transform 0.2s;">
-                  <span style="display: flex; align-items: center; gap: 6px;">
-                    <span>发送</span>
-                    <span>🚀</span>
-                  </span>
-                </button>
-              </div>
-              <div style="margin-top: 10px; font-size: 11px; color: var(--text-tertiary); text-align: center;">
-                💡 提示：按 Enter 发送，Shift + Enter 换行
-              </div>
-            </div>
+            <!-- 输入区域已移除，使用快捷问题按钮 -->
           </div>
         </div>
       </div>
@@ -1248,57 +1271,72 @@ export function renderAdminDashboard(user, wsService) {
       document.getElementById('aiModal').classList.add('hidden');
     });
 
-    // 快捷问题按钮
+    // 快捷问题按钮 - 直接发送问题
     document.querySelectorAll('.quick-question-btn').forEach(btn => {
-      btn.addEventListener('click', () => {
-        document.getElementById('aiInputText').value = btn.dataset.question;
-        document.getElementById('aiSendBtnModal').click();
+      btn.addEventListener('click', async () => {
+        const question = btn.dataset.question;
+        const chatMessages = document.getElementById('aiChatMessages');
+        
+        // 显示用户问题
+        const userMsg = document.createElement('div');
+        userMsg.className = 'ai-message user';
+        userMsg.textContent = question;
+        userMsg.style.cssText = 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 18px; border-radius: 18px 18px 4px 18px; margin: 10px 0; max-width: 75%; margin-left: auto; text-align: right; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); animation: slideInRight 0.3s ease;';
+        chatMessages.appendChild(userMsg);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        
+        // 发送到AI
+        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 })
+          });
+          
+          const data = await response.json();
+          
+          // 显示AI回复
+          const aiMsg = document.createElement('div');
+          aiMsg.className = 'ai-message ai';
+          aiMsg.textContent = data.answer || '抱歉，我现在无法回答这个问题。';
+          aiMsg.style.cssText = 'background: var(--bg-secondary); padding: 15px 18px; border-radius: 18px 18px 18px 4px; margin: 10px 0; max-width: 75%; border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.05); animation: slideInLeft 0.3s ease; line-height: 1.6;';
+          chatMessages.appendChild(aiMsg);
+          chatMessages.scrollTop = chatMessages.scrollHeight;
+        } catch (error) {
+          const errorMsg = document.createElement('div');
+          errorMsg.className = 'ai-message ai';
+          errorMsg.textContent = '抱歉，发生了错误：' + error.message;
+          errorMsg.style.cssText = 'background: var(--bg-secondary); padding: 15px 18px; border-radius: 18px 18px 18px 4px; margin: 10px 0; max-width: 75%; border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.05); animation: slideInLeft 0.3s ease; line-height: 1.6;';
+          chatMessages.appendChild(errorMsg);
+          chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
       });
+      
+      // 悬停效果
       btn.addEventListener('mouseenter', (e) => {
-        e.target.style.background = 'var(--primary)';
-        e.target.style.color = 'white';
-        e.target.style.transform = 'translateY(-2px)';
+        e.target.style.transform = 'translateY(-3px) scale(1.02)';
+        e.target.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
       });
       btn.addEventListener('mouseleave', (e) => {
-        e.target.style.background = 'var(--bg)';
-        e.target.style.color = 'inherit';
-        e.target.style.transform = 'translateY(0)';
+        e.target.style.transform = 'translateY(0) scale(1)';
+        const gradient = e.target.style.background;
+        if (gradient.includes('667eea')) {
+          e.target.style.boxShadow = '0 2px 8px rgba(102, 126, 234, 0.3)';
+        } else if (gradient.includes('f093fb')) {
+          e.target.style.boxShadow = '0 2px 8px rgba(240, 147, 251, 0.3)';
+        } else if (gradient.includes('4facfe')) {
+          e.target.style.boxShadow = '0 2px 8px rgba(79, 172, 254, 0.3)';
+        } else {
+          e.target.style.boxShadow = '0 2px 8px rgba(250, 112, 154, 0.3)';
+        }
       });
     });
 
-    // AI输入框自动调整高度
-    const aiInput = document.getElementById('aiInputText');
-    aiInput.addEventListener('input', () => {
-      aiInput.style.height = 'auto';
-      aiInput.style.height = aiInput.scrollHeight + 'px';
-    });
-
-    // 支持 Enter 发送，Shift+Enter 换行
-    aiInput.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        document.getElementById('aiSendBtnModal').click();
-      }
-    });
-
-    // 输入框聚焦效果
-    aiInput.addEventListener('focus', () => {
-      aiInput.style.borderColor = 'var(--primary)';
-    });
-    aiInput.addEventListener('blur', () => {
-      aiInput.style.borderColor = 'var(--border)';
-    });
-
-    // 发送按钮悬停效果
-    const aiSendBtn = document.getElementById('aiSendBtnModal');
-    aiSendBtn.addEventListener('mouseenter', () => {
-      aiSendBtn.style.transform = 'scale(1.05)';
-    });
-    aiSendBtn.addEventListener('mouseleave', () => {
-      aiSendBtn.style.transform = 'scale(1)';
-    });
 
-    document.getElementById('aiSendBtnModal').addEventListener('click', async () => {
       const input = document.getElementById('aiInputText');
       const question = input.value.trim();
       if (!question) return;