2766 lines
106 KiB
Plaintext
2766 lines
106 KiB
Plaintext
|
/* ===== 云大阁网站JavaScript - 修复版 ===== */
|
|||
|
|
|
|||
|
|
// 全局变量
|
|||
|
|
let chatCounter = 0;
|
|||
|
|
let isDeepSearchActive = false;
|
|||
|
|
let currentChatId = null;
|
|||
|
|
let chatHistoryData = new Map(); // 存储聊天历史数据
|
|||
|
|
let isOnlineMode = false; // 是否使用在线模式（连接后端），默认false使用本地存储
|
|||
|
|
|
|||
|
|
// DOM加载完成后执行
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
// 添加ESC键监听器以支持中断请求
|
|||
|
|
document.addEventListener('keydown', function(e) {
|
|||
|
|
if (e.key === 'Escape' && window.isSubmitting) {
|
|||
|
|
console.log('用户按下ESC键，中断请求');
|
|||
|
|
|
|||
|
|
// 中断请求
|
|||
|
|
if (window.currentAbortController) {
|
|||
|
|
window.currentAbortController.abort();
|
|||
|
|
window.currentAbortController = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重置状态
|
|||
|
|
window.isSubmitting = false;
|
|||
|
|
if (window.updateSendUI) {
|
|||
|
|
window.updateSendUI(false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示提示
|
|||
|
|
const statusText = document.querySelector('.status-text');
|
|||
|
|
if (statusText) {
|
|||
|
|
statusText.textContent = '已取消请求（ESC）';
|
|||
|
|
statusText.style.color = '#dc3545';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
statusText.textContent = 'Ready to submit!';
|
|||
|
|
statusText.style.color = '';
|
|||
|
|
}, 3000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 在聊天窗口添加提示
|
|||
|
|
const chatContent = document.getElementById('chatContent');
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
if (chatContent || chatMessages) {
|
|||
|
|
const targetElement = chatMessages || chatContent;
|
|||
|
|
const warningDiv = document.createElement('div');
|
|||
|
|
warningDiv.className = 'ai-message';
|
|||
|
|
warningDiv.style.cssText = 'background-color: #fff3cd; border: 1px solid #ffc107; color: #856404; padding: 10px; border-radius: 8px; margin: 10px 0;';
|
|||
|
|
warningDiv.innerHTML = '⚠️ 请求已被ESC键取消。注意：后端可能仍在处理，建议稍等片刻再发送新请求。';
|
|||
|
|
targetElement.appendChild(warningDiv);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
warningDiv.style.transition = 'opacity 0.5s';
|
|||
|
|
warningDiv.style.opacity = '0';
|
|||
|
|
setTimeout(() => warningDiv.remove(), 500);
|
|||
|
|
}, 5000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 只初始化核心功能，避免冲突
|
|||
|
|
initSidebar();
|
|||
|
|
initChat();
|
|||
|
|
// initUserDropdown(); // 注释掉，由auth-integration.js处理
|
|||
|
|
initSearch();
|
|||
|
|
initChatHistoryActions();
|
|||
|
|
initTextRotator();
|
|||
|
|
init3DTicker();
|
|||
|
|
initDownloadModal();
|
|||
|
|
initBackground(); // 初始化背景动画
|
|||
|
|
initToolsDropdown(); // 初始化工具下拉菜单
|
|||
|
|
|
|||
|
|
// 确保初始状态下3D图片是显示的
|
|||
|
|
const tickerSection = document.querySelector('.ticker-section');
|
|||
|
|
const ticker3D = document.getElementById('ticker3D');
|
|||
|
|
|
|||
|
|
console.log('检查ticker-section:', tickerSection);
|
|||
|
|
console.log('检查ticker3D:', ticker3D);
|
|||
|
|
console.log('body是否有chat-mode类:', document.body.classList.contains('chat-mode'));
|
|||
|
|
|
|||
|
|
if (tickerSection) {
|
|||
|
|
tickerSection.style.display = 'block';
|
|||
|
|
tickerSection.style.visibility = 'visible';
|
|||
|
|
tickerSection.style.opacity = '1';
|
|||
|
|
console.log('设置ticker-section显示');
|
|||
|
|
|
|||
|
|
// 检查computed style
|
|||
|
|
const computedStyle = window.getComputedStyle(tickerSection);
|
|||
|
|
console.log('ticker-section computed display:', computedStyle.display);
|
|||
|
|
console.log('ticker-section computed visibility:', computedStyle.visibility);
|
|||
|
|
console.log('ticker-section computed height:', computedStyle.height);
|
|||
|
|
} else {
|
|||
|
|
console.error('未找到ticker-section元素');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置侧边栏默认状态 - 默认折叠
|
|||
|
|
const sidebar = document.getElementById('sidebar');
|
|||
|
|
|
|||
|
|
if (sidebar) {
|
|||
|
|
// 所有设备默认折叠状态
|
|||
|
|
sidebar.classList.add('collapsed');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页面加载完自动聚焦到输入框
|
|||
|
|
const messageInput = document.getElementById('messageInput');
|
|||
|
|
if (messageInput) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
messageInput.focus();
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化聊天管理器监听器
|
|||
|
|
initChatManagerListeners();
|
|||
|
|
|
|||
|
|
// 等待 ChatManager 初始化完成后再加载
|
|||
|
|
const waitForChatManager = () => {
|
|||
|
|
if (window.chatManager && window.chatManager.initialized) {
|
|||
|
|
console.log('[Main] ChatManager 已初始化，开始加载聊天历史');
|
|||
|
|
|
|||
|
|
// 加载用户的聊天历史
|
|||
|
|
loadUserChatHistory();
|
|||
|
|
|
|||
|
|
// 恢复当前对话
|
|||
|
|
setTimeout(() => {
|
|||
|
|
console.log('[Main] 检查是否需要恢复对话...');
|
|||
|
|
console.log('[Main] chatManager.currentChatId:', window.chatManager.currentChatId);
|
|||
|
|
|
|||
|
|
if (window.chatManager.currentChatId) {
|
|||
|
|
console.log('[Main] 开始恢复上次的对话:', window.chatManager.currentChatId);
|
|||
|
|
loadChatHistory(window.chatManager.currentChatId);
|
|||
|
|
|
|||
|
|
// 高亮侧边栏中的当前对话
|
|||
|
|
const chatItem = document.querySelector(`[data-chat-id="${window.chatManager.currentChatId}"]`);
|
|||
|
|
if (chatItem) {
|
|||
|
|
chatItem.classList.add('active');
|
|||
|
|
console.log('[Main] 已高亮当前对话项');
|
|||
|
|
} else {
|
|||
|
|
console.log('[Main] ⚠️ 未找到对应的侧边栏对话项');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log('[Main] 没有需要恢复的对话');
|
|||
|
|
}
|
|||
|
|
}, 50);
|
|||
|
|
} else {
|
|||
|
|
console.log('[Main] 等待 ChatManager 初始化...');
|
|||
|
|
setTimeout(waitForChatManager, 100);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
waitForChatManager();
|
|||
|
|
|
|||
|
|
// 监听用户登录状态变化
|
|||
|
|
initUserChangeListener();
|
|||
|
|
|
|||
|
|
// 初始化Markdown渲染器和工具栏
|
|||
|
|
if (window.markdownRenderer) {
|
|||
|
|
window.markdownRenderer.initCodeCopyButtons();
|
|||
|
|
|
|||
|
|
// 确保工具栏被初始化
|
|||
|
|
const welcomeToolbar = document.getElementById('markdownToolbar');
|
|||
|
|
const welcomeInput = document.getElementById('messageInput');
|
|||
|
|
if (welcomeToolbar && welcomeInput) {
|
|||
|
|
welcomeToolbar.innerHTML = window.markdownRenderer.createToolbar();
|
|||
|
|
welcomeToolbar.style.display = 'flex';
|
|||
|
|
window.markdownRenderer.attachToolbarEvents(welcomeToolbar, welcomeInput);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化工具下拉菜单
|
|||
|
|
initToolsDropdown();
|
|||
|
|
|
|||
|
|
console.log('云大阁网站已加载完成');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* ===== 侧边栏功能 - 复刻duijie.html简单逻辑 + yundage-keyong1的tooltip ===== */
|
|||
|
|
function toggleSidebar() {
|
|||
|
|
document.getElementById('sidebar').classList.toggle('collapsed');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initSidebar() {
|
|||
|
|
// Logo点击切换事件
|
|||
|
|
const logoMenuItem = document.getElementById('logoMenuItem');
|
|||
|
|
if (logoMenuItem) {
|
|||
|
|
logoMenuItem.addEventListener('click', function(e) {
|
|||
|
|
toggleSidebar();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 新建对话按钮事件
|
|||
|
|
const newChatBtn = document.getElementById('newChatBtn');
|
|||
|
|
if (newChatBtn) {
|
|||
|
|
newChatBtn.addEventListener('click', function() {
|
|||
|
|
console.log('新建对话按钮被点击');
|
|||
|
|
startNewChat();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下载APP按钮事件
|
|||
|
|
const downloadAppBtn = document.getElementById('downloadAppBtn');
|
|||
|
|
if (downloadAppBtn) {
|
|||
|
|
downloadAppBtn.addEventListener('click', function() {
|
|||
|
|
console.log('下载APP按钮被点击');
|
|||
|
|
initDownloadModal();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化tooltip定位
|
|||
|
|
initTooltipPositioning();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ChatGPT风格的tooltip定位 - 将tooltip移动到body避免遮挡
|
|||
|
|
function initTooltipPositioning() {
|
|||
|
|
const sidebar = document.getElementById('sidebar');
|
|||
|
|
if (!sidebar) return; // 如果sidebar不存在，直接返回
|
|||
|
|
|
|||
|
|
const tooltipWrappers = sidebar.querySelectorAll('.tooltip-wrapper');
|
|||
|
|
|
|||
|
|
tooltipWrappers.forEach(wrapper => {
|
|||
|
|
const tooltipText = wrapper.querySelector('.tooltip-text');
|
|||
|
|
if (!tooltipText) return;
|
|||
|
|
|
|||
|
|
let floatingTooltip = null;
|
|||
|
|
|
|||
|
|
wrapper.addEventListener('mouseenter', function() {
|
|||
|
|
if (sidebar.classList.contains('collapsed')) {
|
|||
|
|
// 创建独立的tooltip元素添加到body
|
|||
|
|
floatingTooltip = document.createElement('div');
|
|||
|
|
floatingTooltip.textContent = tooltipText.textContent;
|
|||
|
|
floatingTooltip.className = 'floating-tooltip';
|
|||
|
|
floatingTooltip.style.cssText = `
|
|||
|
|
position: fixed;
|
|||
|
|
background-color: #333;
|
|||
|
|
color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 6px 10px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
font-size: 13px;
|
|||
|
|
z-index: 999999;
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|||
|
|
pointer-events: none;
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// 获取wrapper的位置
|
|||
|
|
const rect = wrapper.getBoundingClientRect();
|
|||
|
|
|
|||
|
|
// 设置tooltip位置
|
|||
|
|
floatingTooltip.style.left = (rect.right + 10) + 'px';
|
|||
|
|
floatingTooltip.style.top = (rect.top + rect.height / 2) + 'px';
|
|||
|
|
floatingTooltip.style.transform = 'translateY(-50%)';
|
|||
|
|
|
|||
|
|
// 添加到body
|
|||
|
|
document.body.appendChild(floatingTooltip);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
wrapper.addEventListener('mouseleave', function() {
|
|||
|
|
if (floatingTooltip) {
|
|||
|
|
document.body.removeChild(floatingTooltip);
|
|||
|
|
floatingTooltip = null;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 聊天功能 ===== */
|
|||
|
|
function initChat() {
|
|||
|
|
const sendBtn = document.getElementById('sendBtn');
|
|||
|
|
const messageInput = document.getElementById('messageInput');
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
const deepSearchToggle = document.getElementById('deepSearchToggle');
|
|||
|
|
const newChatBtn = document.getElementById('newChatBtn');
|
|||
|
|
const voiceBtn = document.getElementById('voiceBtn');
|
|||
|
|
|
|||
|
|
// 聊天模式元素
|
|||
|
|
const chatModeSendBtn = document.getElementById('chatModeSendBtn');
|
|||
|
|
const chatModeMessageInput = document.getElementById('chatModeMessageInput');
|
|||
|
|
|
|||
|
|
if (!sendBtn || !messageInput || !chatMessages) {
|
|||
|
|
console.error('关键聊天元素未找到');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化发送按钮状态
|
|||
|
|
updateSendButtonState();
|
|||
|
|
|
|||
|
|
// 发送消息（支持停止功能）
|
|||
|
|
sendBtn.addEventListener('click', function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
if (window.isSubmitting) {
|
|||
|
|
// 停止操作
|
|||
|
|
console.log('用户点击停止按钮');
|
|||
|
|
if (window.currentAbortController) {
|
|||
|
|
window.currentAbortController.abort();
|
|||
|
|
window.currentAbortController = null;
|
|||
|
|
}
|
|||
|
|
window.isSubmitting = false;
|
|||
|
|
updateSendUI(false);
|
|||
|
|
|
|||
|
|
// 显示提示信息
|
|||
|
|
const statusText = document.querySelector('.status-text');
|
|||
|
|
if (statusText) {
|
|||
|
|
statusText.textContent = '已取消请求';
|
|||
|
|
statusText.style.color = '#dc3545';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
statusText.textContent = 'Ready to submit!';
|
|||
|
|
statusText.style.color = '';
|
|||
|
|
}, 3000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 在聊天窗口添加提示
|
|||
|
|
const chatContent = document.getElementById('chatContent');
|
|||
|
|
if (chatContent) {
|
|||
|
|
const warningDiv = document.createElement('div');
|
|||
|
|
warningDiv.className = 'ai-message';
|
|||
|
|
warningDiv.style.cssText = 'background-color: #fff3cd; border: 1px solid #ffc107; color: #856404; padding: 10px; border-radius: 8px; margin: 10px 0;';
|
|||
|
|
warningDiv.innerHTML = '⚠️ 请求已取消。注意：后端可能仍在处理，建议稍等片刻再发送新请求。';
|
|||
|
|
chatContent.appendChild(warningDiv);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
warningDiv.style.transition = 'opacity 0.5s';
|
|||
|
|
warningDiv.style.opacity = '0';
|
|||
|
|
setTimeout(() => warningDiv.remove(), 500);
|
|||
|
|
}, 5000);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 发送操作
|
|||
|
|
console.log('发送按钮被点击');
|
|||
|
|
sendMessage();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 回车发送消息（Shift+Enter换行）
|
|||
|
|
messageInput.addEventListener('keydown', function(e) {
|
|||
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
sendMessage();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听输入框变化，更新发送按钮状态和自动调整高度
|
|||
|
|
messageInput.addEventListener('input', function() {
|
|||
|
|
updateSendButtonState();
|
|||
|
|
autoResizeTextarea(this);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 深度检索切换
|
|||
|
|
if (deepSearchToggle) {
|
|||
|
|
deepSearchToggle.addEventListener('click', function() {
|
|||
|
|
console.log('深度检索按钮被点击');
|
|||
|
|
toggleDeepSearch();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除重复的事件监听器绑定，前面已经绑定过了
|
|||
|
|
|
|||
|
|
// 语音按钮（暂时无功能）
|
|||
|
|
if (voiceBtn) {
|
|||
|
|
voiceBtn.addEventListener('click', function() {
|
|||
|
|
console.log('语音按钮被点击');
|
|||
|
|
// 这里可以添加语音功能
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 聊天模式输入框事件监听器
|
|||
|
|
if (chatModeSendBtn && chatModeMessageInput) {
|
|||
|
|
// 发送消息（支持停止功能）
|
|||
|
|
chatModeSendBtn.addEventListener('click', function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
if (window.isSubmitting) {
|
|||
|
|
// 停止操作
|
|||
|
|
console.log('用户点击停止按钮（聊天模式）');
|
|||
|
|
if (window.currentAbortController) {
|
|||
|
|
window.currentAbortController.abort();
|
|||
|
|
window.currentAbortController = null;
|
|||
|
|
}
|
|||
|
|
window.isSubmitting = false;
|
|||
|
|
updateSendUI(false);
|
|||
|
|
|
|||
|
|
// 在聊天窗口添加提示
|
|||
|
|
addMessage('⚠️ 请求已取消。注意：后端可能仍在处理，建议稍等片刻再发送新请求。', 'system');
|
|||
|
|
} else {
|
|||
|
|
// 发送操作
|
|||
|
|
sendChatModeMessage();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 回车发送消息
|
|||
|
|
chatModeMessageInput.addEventListener('keydown', function(e) {
|
|||
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
sendChatModeMessage();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听输入框变化
|
|||
|
|
chatModeMessageInput.addEventListener('input', function() {
|
|||
|
|
updateChatModeSendButtonState();
|
|||
|
|
autoResizeTextarea(this);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新发送按钮状态
|
|||
|
|
function updateSendButtonState() {
|
|||
|
|
const messageInput = document.getElementById('messageInput');
|
|||
|
|
const sendBtn = document.getElementById('sendBtn');
|
|||
|
|
const sendIcon = document.getElementById('sendIcon');
|
|||
|
|
|
|||
|
|
if (messageInput && sendBtn && sendIcon) {
|
|||
|
|
const hasText = messageInput.value.trim().length > 0;
|
|||
|
|
sendIcon.style.opacity = hasText && !window.isSubmitting ? '1' : '0.3';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新发送UI状态（改造为停止按钮）
|
|||
|
|
function updateSendUI(isLoading) {
|
|||
|
|
const sendIcon = document.getElementById('sendIcon');
|
|||
|
|
const loadingSpinner = document.getElementById('loadingSpinner');
|
|||
|
|
const statusText = document.querySelector('.status-text');
|
|||
|
|
const messageInput = document.getElementById('messageInput');
|
|||
|
|
const sendBtn = document.getElementById('sendBtn');
|
|||
|
|
|
|||
|
|
// 同时更新聊天模式的UI
|
|||
|
|
const chatModeSendIcon = document.getElementById('chatModeSendIcon');
|
|||
|
|
const chatModeLoadingSpinner = document.getElementById('chatModeLoadingSpinner');
|
|||
|
|
const chatModeMessageInput = document.getElementById('chatModeMessageInput');
|
|||
|
|
const chatModeSendBtn = document.getElementById('chatModeSendBtn');
|
|||
|
|
|
|||
|
|
if (isLoading) {
|
|||
|
|
// 首页：显示红色停止图标
|
|||
|
|
if (loadingSpinner) {
|
|||
|
|
loadingSpinner.style.setProperty('display', 'none', 'important');
|
|||
|
|
}
|
|||
|
|
if (sendIcon) {
|
|||
|
|
sendIcon.style.display = 'block';
|
|||
|
|
sendIcon.innerHTML = `
|
|||
|
|
<rect x="6" y="6" width="12" height="12" fill="#dc3545"/>
|
|||
|
|
`;
|
|||
|
|
sendIcon.style.opacity = '1';
|
|||
|
|
}
|
|||
|
|
if (sendBtn) {
|
|||
|
|
sendBtn.disabled = false;
|
|||
|
|
sendBtn.title = '点击停止（或按ESC键）';
|
|||
|
|
}
|
|||
|
|
if (statusText) statusText.textContent = 'AI is thinking...';
|
|||
|
|
if (messageInput) messageInput.disabled = true;
|
|||
|
|
|
|||
|
|
// 聊天模式：同样显示红色停止图标
|
|||
|
|
if (chatModeLoadingSpinner) {
|
|||
|
|
chatModeLoadingSpinner.style.setProperty('display', 'none', 'important');
|
|||
|
|
}
|
|||
|
|
if (chatModeSendIcon) {
|
|||
|
|
chatModeSendIcon.style.display = 'block';
|
|||
|
|
chatModeSendIcon.innerHTML = `
|
|||
|
|
<rect x="6" y="6" width="12" height="12" fill="#dc3545"/>
|
|||
|
|
`;
|
|||
|
|
chatModeSendIcon.style.opacity = '1';
|
|||
|
|
}
|
|||
|
|
if (chatModeSendBtn) {
|
|||
|
|
chatModeSendBtn.disabled = false;
|
|||
|
|
chatModeSendBtn.title = '点击停止（或按ESC键）';
|
|||
|
|
}
|
|||
|
|
if (chatModeMessageInput) chatModeMessageInput.disabled = true;
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
// 首页：恢复发送图标
|
|||
|
|
if (sendIcon) {
|
|||
|
|
sendIcon.style.display = 'block';
|
|||
|
|
sendIcon.innerHTML = `
|
|||
|
|
<path d="m3 3 3 9-3 9 19-9Z"/>
|
|||
|
|
<path d="m6 12 13 0"/>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
if (loadingSpinner) {
|
|||
|
|
loadingSpinner.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
if (sendBtn) {
|
|||
|
|
sendBtn.disabled = false;
|
|||
|
|
sendBtn.title = '发送消息';
|
|||
|
|
}
|
|||
|
|
if (statusText) statusText.textContent = 'Ready to submit!';
|
|||
|
|
if (messageInput) messageInput.disabled = false;
|
|||
|
|
updateSendButtonState();
|
|||
|
|
|
|||
|
|
// 聊天模式：恢复发送图标
|
|||
|
|
if (chatModeSendIcon) {
|
|||
|
|
chatModeSendIcon.style.display = 'block';
|
|||
|
|
chatModeSendIcon.innerHTML = `
|
|||
|
|
<path d="m3 3 3 9-3 9 19-9Z"/>
|
|||
|
|
<path d="m6 12 13 0"/>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
if (chatModeLoadingSpinner) {
|
|||
|
|
chatModeLoadingSpinner.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
if (chatModeSendBtn) {
|
|||
|
|
chatModeSendBtn.disabled = false;
|
|||
|
|
chatModeSendBtn.title = '发送消息';
|
|||
|
|
}
|
|||
|
|
if (chatModeMessageInput) chatModeMessageInput.disabled = false;
|
|||
|
|
updateChatModeSendButtonState();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 暴露到全局以便其他模块使用
|
|||
|
|
window.updateSendUI = updateSendUI;
|
|||
|
|
|
|||
|
|
// 聊天模式按钮状态管理
|
|||
|
|
function updateChatModeSendButtonState() {
|
|||
|
|
const chatModeMessageInput = document.getElementById('chatModeMessageInput');
|
|||
|
|
const chatModeSendIcon = document.getElementById('chatModeSendIcon');
|
|||
|
|
|
|||
|
|
if (chatModeMessageInput && chatModeSendIcon) {
|
|||
|
|
const hasText = chatModeMessageInput.value.trim().length > 0;
|
|||
|
|
chatModeSendIcon.style.opacity = hasText && !window.isSubmitting ? '1' : '0.3';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 聊天模式发送消息
|
|||
|
|
async function sendChatModeMessage() {
|
|||
|
|
const chatModeMessageInput = document.getElementById('chatModeMessageInput');
|
|||
|
|
const message = chatModeMessageInput.value.trim();
|
|||
|
|
|
|||
|
|
if (!message || window.isSubmitting) {
|
|||
|
|
console.log('消息为空或正在发送中，不发送');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('聊天模式发送消息:', message);
|
|||
|
|
|
|||
|
|
// 设置发送状态
|
|||
|
|
window.isSubmitting = true;
|
|||
|
|
updateChatModeSendUI(true);
|
|||
|
|
|
|||
|
|
// 如果是第一条消息且没有当前聊天ID，创建新聊天
|
|||
|
|
if (!currentChatId) {
|
|||
|
|
// 立即创建新的聊天会话
|
|||
|
|
if (window.chatManager) {
|
|||
|
|
currentChatId = window.chatManager.createChat(message);
|
|||
|
|
window.chatManager.currentChatId = currentChatId;
|
|||
|
|
|
|||
|
|
// 立即添加到侧边栏
|
|||
|
|
const chatTitle = message.length > 20 ? message.substring(0, 20) + '...' : message;
|
|||
|
|
addChatToSidebar(currentChatId, chatTitle, true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存当前聊天ID，避免切换聊天记录时被改变
|
|||
|
|
const targetChatId = currentChatId;
|
|||
|
|
|
|||
|
|
// 添加用户消息
|
|||
|
|
await addMessage(message, 'user');
|
|||
|
|
|
|||
|
|
// 清空输入框
|
|||
|
|
chatModeMessageInput.value = '';
|
|||
|
|
autoResizeTextarea(chatModeMessageInput);
|
|||
|
|
updateChatModeSendButtonState();
|
|||
|
|
|
|||
|
|
// 调用后端API获取AI回复
|
|||
|
|
try {
|
|||
|
|
// 判断是否使用流式响应
|
|||
|
|
const useStream = true; // 可以根据需要调整
|
|||
|
|
|
|||
|
|
if (useStream) {
|
|||
|
|
// 流式响应
|
|||
|
|
let aiMessageId = null;
|
|||
|
|
let aiContent = '';
|
|||
|
|
|
|||
|
|
// 获取工具设置
|
|||
|
|
const toolsSettings = window.getToolsSettings ? window.getToolsSettings() : { deepResearch: false, showThinking: false };
|
|||
|
|
const isDeepResearch = toolsSettings.deepResearch;
|
|||
|
|
const showThinking = toolsSettings.showThinking;
|
|||
|
|
|
|||
|
|
// 创建状态显示组件
|
|||
|
|
let statusDisplay = null;
|
|||
|
|
if (window.StreamStatusDisplay) {
|
|||
|
|
// 在消息区域之前创建状态显示容器
|
|||
|
|
const statusContainer = document.createElement('div');
|
|||
|
|
statusContainer.id = `status-${targetChatId}-${Date.now()}`;
|
|||
|
|
chatMessages.appendChild(statusContainer);
|
|||
|
|
statusDisplay = new window.StreamStatusDisplay(statusContainer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const abortController = await window.ChatAPIService.sendMessageStream(
|
|||
|
|
window.currentAbortController = abortController; // 保存到全局以便中断
|
|||
|
|
{
|
|||
|
|
message: message,
|
|||
|
|
conversationId: targetChatId, // 使用保存的targetChatId
|
|||
|
|
mode: isDeepSearchActive ? 'research' : 'chat',
|
|||
|
|
deepResearch: isDeepResearch,
|
|||
|
|
showThinking: showThinking
|
|||
|
|
},
|
|||
|
|
// onMessage: 接收消息片段
|
|||
|
|
(content) => {
|
|||
|
|
// 只有当前聊天ID与目标ID一致时才更新UI
|
|||
|
|
if (currentChatId === targetChatId) {
|
|||
|
|
aiContent += content;
|
|||
|
|
if (aiMessageId) {
|
|||
|
|
// 更新已存在的消息
|
|||
|
|
updateMessageContent(aiMessageId, aiContent);
|
|||
|
|
} else {
|
|||
|
|
// 创建新消息
|
|||
|
|
aiMessageId = Date.now().toString();
|
|||
|
|
addStreamMessage(aiContent, 'ai', aiMessageId);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 如果已切换到其他聊天，仅累积内容但不更新UI
|
|||
|
|
aiContent += content;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// onComplete: 完成回调
|
|||
|
|
async (data) => {
|
|||
|
|
console.log('流式响应完成:', data);
|
|||
|
|
// 使用保存的targetChatId保存AI回复到正确的聊天记录
|
|||
|
|
if (window.chatManager && targetChatId) {
|
|||
|
|
// 保存到目标聊天记录
|
|||
|
|
const originalChatId = window.chatManager.currentChatId;
|
|||
|
|
window.chatManager.currentChatId = targetChatId;
|
|||
|
|
window.chatManager.addMessage(aiContent, 'ai');
|
|||
|
|
// 如果当前聊天已切换，不需要恢复
|
|||
|
|
if (currentChatId !== targetChatId) {
|
|||
|
|
window.chatManager.currentChatId = originalChatId;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 恢复发送状态
|
|||
|
|
window.isSubmitting = false;
|
|||
|
|
updateChatModeSendUI(false);
|
|||
|
|
},
|
|||
|
|
// onError: 错误回调
|
|||
|
|
(error) => {
|
|||
|
|
console.error('流式响应错误:', error);
|
|||
|
|
addMessage(`抱歉，发生了错误：${error.message}`, 'ai');
|
|||
|
|
window.isSubmitting = false;
|
|||
|
|
updateChatModeSendUI(false);
|
|||
|
|
},
|
|||
|
|
// onThinking: 思考过程回调
|
|||
|
|
showThinking ? (thinking) => {
|
|||
|
|
console.log('思考过程:', thinking);
|
|||
|
|
// 显示思考过程
|
|||
|
|
if (!document.getElementById('thinking-message')) {
|
|||
|
|
const thinkingDiv = document.createElement('div');
|
|||
|
|
thinkingDiv.id = 'thinking-message';
|
|||
|
|
thinkingDiv.className = 'thinking-process';
|
|||
|
|
thinkingDiv.innerHTML = `
|
|||
|
|
<div class="thinking-label">🤔 思考过程：</div>
|
|||
|
|
<div class="thinking-content"></div>
|
|||
|
|
`;
|
|||
|
|
chatMessages.appendChild(thinkingDiv);
|
|||
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|||
|
|
}
|
|||
|
|
const thinkingContent = document.querySelector('#thinking-message .thinking-content');
|
|||
|
|
if (thinkingContent) {
|
|||
|
|
thinkingContent.textContent += thinking;
|
|||
|
|
}
|
|||
|
|
} : null,
|
|||
|
|
// onStatus: 状态更新回调（新增）
|
|||
|
|
(status) => {
|
|||
|
|
if (statusDisplay) {
|
|||
|
|
statusDisplay.updateStatus(status);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
// 同步响应
|
|||
|
|
const response = await window.ChatAPIService.sendMessage({
|
|||
|
|
message: message,
|
|||
|
|
conversationId: targetChatId, // 使用保存的targetChatId
|
|||
|
|
mode: isDeepSearchActive ? 'research' : 'chat'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.success) {
|
|||
|
|
// 更新会话ID（如果是新会话）
|
|||
|
|
if (response.conversationId && !targetChatId) {
|
|||
|
|
const newChatId = response.conversationId;
|
|||
|
|
// 只有当前聊天与目标一致时才更新全局变量
|
|||
|
|
if (currentChatId === targetChatId) {
|
|||
|
|
currentChatId = newChatId;
|
|||
|
|
}
|
|||
|
|
if (window.chatManager) {
|
|||
|
|
window.chatManager.currentChatId = newChatId;
|
|||
|
|
}
|
|||
|
|
// 添加新会话到侧边栏
|
|||
|
|
const chatTitle = message.length > 20 ? message.substring(0, 20) + '...' : message;
|
|||
|
|
addChatToSidebar(newChatId, chatTitle, true);
|
|||
|
|
}
|
|||
|
|
// 使用addMessageToChat统一处理AI回复
|
|||
|
|
await addMessageToChat(response.answer, 'ai', targetChatId);
|
|||
|
|
} else {
|
|||
|
|
// 使用addMessageToChat统一处理错误消息
|
|||
|
|
await addMessageToChat('抱歉，获取回复时出现错误。', 'ai', targetChatId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 恢复发送状态
|
|||
|
|
window.isSubmitting = false;
|
|||
|
|
updateChatModeSendUI(false);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('发送消息失败:', error);
|
|||
|
|
// 使用addMessageToChat统一处理错误消息
|
|||
|
|
await addMessageToChat(`抱歉，发生了错误：${error.message}`, 'ai', targetChatId);
|
|||
|
|
window.isSubmitting = false;
|
|||
|
|
updateChatModeSendUI(false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新聚焦输入框
|
|||
|
|
chatModeMessageInput.focus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 聊天模式UI状态更新（直接调用统一的updateSendUI）
|
|||
|
|
function updateChatModeSendUI(isLoading) {
|
|||
|
|
updateSendUI(isLoading);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 暴露到全局
|
|||
|
|
window.updateChatModeSendUI = updateChatModeSendUI;
|
|||
|
|
|
|||
|
|
// 自动调整输入框高度（参考ChatGPT/DeepSeek）
|
|||
|
|
function autoResizeTextarea(textarea) {
|
|||
|
|
// 检查是否是欢迎模式的输入框（有特殊的最小高度）
|
|||
|
|
if (textarea.id === 'messageInput') {
|
|||
|
|
// 欢迎模式输入框保持固定高度124px，不自动调整
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 聊天模式输入框自动调整高度
|
|||
|
|
// 重置高度以获取正确的scrollHeight
|
|||
|
|
textarea.style.height = '40px';
|
|||
|
|
|
|||
|
|
// 计算新高度
|
|||
|
|
const newHeight = Math.min(textarea.scrollHeight, 120); // 最大120px
|
|||
|
|
textarea.style.height = newHeight + 'px';
|
|||
|
|
|
|||
|
|
// 如果内容超过最大高度，显示滚动条
|
|||
|
|
if (textarea.scrollHeight > 120) {
|
|||
|
|
textarea.style.overflowY = 'auto';
|
|||
|
|
} else {
|
|||
|
|
textarea.style.overflowY = 'hidden';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function sendMessage() {
|
|||
|
|
const message = messageInput.value.trim();
|
|||
|
|
if (!message || window.isSubmitting) {
|
|||
|
|
console.log('消息为空或正在发送中，不发送');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('发送消息:', message);
|
|||
|
|
|
|||
|
|
// 设置发送状态
|
|||
|
|
window.isSubmitting = true;
|
|||
|
|
updateSendUI(true);
|
|||
|
|
|
|||
|
|
// 显示聊天容器
|
|||
|
|
showChatContainer();
|
|||
|
|
|
|||
|
|
// 如果是第一条消息且没有当前聊天ID，创建新聊天
|
|||
|
|
if (!currentChatId) {
|
|||
|
|
// 立即创建新的聊天会话
|
|||
|
|
if (window.chatManager) {
|
|||
|
|
currentChatId = window.chatManager.createChat(message);
|
|||
|
|
window.chatManager.currentChatId = currentChatId;
|
|||
|
|
|
|||
|
|
// 立即添加到侧边栏
|
|||
|
|
const chatTitle = message.length > 20 ? message.substring(0, 20) + '...' : message;
|
|||
|
|
addChatToSidebar(currentChatId, chatTitle, true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存当前聊天ID，避免切换聊天记录时被改变
|
|||
|
|
const targetChatId = currentChatId;
|
|||
|
|
|
|||
|
|
// 添加用户消息（使用固定的chatId）
|
|||
|
|
await addMessageToChat(message, 'user', targetChatId);
|
|||
|
|
|
|||
|
|
// 清空输入框并重置高度
|
|||
|
|
messageInput.value = '';
|
|||
|
|
// 欢迎模式输入框保持124px高度
|
|||
|
|
if (messageInput.id === 'messageInput') {
|
|||
|
|
messageInput.style.height = '124px';
|
|||
|
|
} else {
|
|||
|
|
messageInput.style.height = '40px';
|
|||
|
|
}
|
|||
|
|
updateSendButtonState();
|
|||
|
|
|
|||
|
|
// 调用后端API获取AI回复
|
|||
|
|
try {
|
|||
|
|
// 判断是否使用流式响应
|
|||
|
|
const useStream = true; // 可以根据需要调整
|
|||
|
|
|
|||
|
|
if (useStream) {
|
|||
|
|
// 流式响应
|
|||
|
|
let aiMessageId = null;
|
|||
|
|
let aiContent = '';
|
|||
|
|
|
|||
|
|
// 获取工具设置
|
|||
|
|
const toolsSettings = window.getToolsSettings ? window.getToolsSettings() : { deepResearch: false, showThinking: false };
|
|||
|
|
const isDeepResearch = toolsSettings.deepResearch;
|
|||
|
|
const showThinking = toolsSettings.showThinking;
|
|||
|
|
|
|||
|
|
// 创建状态显示组件
|
|||
|
|
let statusDisplay = null;
|
|||
|
|
if (window.StreamStatusDisplay) {
|
|||
|
|
// 在消息区域之前创建状态显示容器
|
|||
|
|
const statusContainer = document.createElement('div');
|
|||
|
|
statusContainer.id = `status-${targetChatId}-${Date.now()}`;
|
|||
|
|
chatMessages.appendChild(statusContainer);
|
|||
|
|
statusDisplay = new window.StreamStatusDisplay(statusContainer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const abortController = await window.ChatAPIService.sendMessageStream(
|
|||
|
|
window.currentAbortController = abortController; // 保存到全局以便中断
|
|||
|
|
{
|
|||
|
|
message: message,
|
|||
|
|
conversationId: targetChatId, // 使用保存的targetChatId
|
|||
|
|
mode: isDeepSearchActive ? 'research' : 'chat',
|
|||
|
|
deepResearch: isDeepResearch,
|
|||
|
|
showThinking: showThinking
|
|||
|
|
},
|
|||
|
|
// onMessage: 接收消息片段
|
|||
|
|
(content) => {
|
|||
|
|
// 只有当前聊天ID与目标ID一致时才更新UI
|
|||
|
|
if (currentChatId === targetChatId) {
|
|||
|
|
aiContent += content;
|
|||
|
|
if (aiMessageId) {
|
|||
|
|
// 更新已存在的消息
|
|||
|
|
updateMessageContent(aiMessageId, aiContent);
|
|||
|
|
} else {
|
|||
|
|
// 创建新消息
|
|||
|
|
aiMessageId = Date.now().toString();
|
|||
|
|
addStreamMessage(aiContent, 'ai', aiMessageId);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 如果已切换到其他聊天，仅累积内容但不更新UI
|
|||
|
|
aiContent += content;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// onComplete: 完成回调
|
|||
|
|
async (data) => {
|
|||
|
|
console.log('流式响应完成:', data);
|
|||
|
|
// 使用保存的targetChatId保存AI回复到正确的聊天记录
|
|||
|
|
if (window.chatManager && targetChatId) {
|
|||
|
|
// 保存到目标聊天记录
|
|||
|
|
const originalChatId = window.chatManager.currentChatId;
|
|||
|
|
window.chatManager.currentChatId = targetChatId;
|
|||
|
|
window.chatManager.addMessage(aiContent, 'ai');
|
|||
|
|
// 如果当前聊天已切换，不需要恢复
|
|||
|
|
if (currentChatId !== targetChatId) {
|
|||
|
|
window.chatManager.currentChatId = originalChatId;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 恢复发送状态
|
|||
|
|
window.isSubmitting = false;
|
|||
|
|
updateSendUI(false);
|
|||
|
|
},
|
|||
|
|
// onError: 错误回调
|
|||
|
|
(error) => {
|
|||
|
|
console.error('流式响应错误:', error);
|
|||
|
|
addMessage(`抱歉，发生了错误：${error.message}`, 'ai');
|
|||
|
|
window.isSubmitting = false;
|
|||
|
|
updateSendUI(false);
|
|||
|
|
},
|
|||
|
|
// onThinking: 思考过程回调
|
|||
|
|
showThinking ? (thinking) => {
|
|||
|
|
console.log('思考过程:', thinking);
|
|||
|
|
// 显示思考过程
|
|||
|
|
if (!document.getElementById('thinking-message')) {
|
|||
|
|
const thinkingDiv = document.createElement('div');
|
|||
|
|
thinkingDiv.id = 'thinking-message';
|
|||
|
|
thinkingDiv.className = 'thinking-process';
|
|||
|
|
thinkingDiv.innerHTML = `
|
|||
|
|
<div class="thinking-label">🤔 思考过程：</div>
|
|||
|
|
<div class="thinking-content"></div>
|
|||
|
|
`;
|
|||
|
|
chatMessages.appendChild(thinkingDiv);
|
|||
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|||
|
|
}
|
|||
|
|
const thinkingContent = document.querySelector('#thinking-message .thinking-content');
|
|||
|
|
if (thinkingContent) {
|
|||
|
|
thinkingContent.textContent += thinking;
|
|||
|
|
}
|
|||
|
|
} : null,
|
|||
|
|
// onStatus: 状态更新回调（新增）
|
|||
|
|
(status) => {
|
|||
|
|
if (statusDisplay) {
|
|||
|
|
statusDisplay.updateStatus(status);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
// 同步响应
|
|||
|
|
const response = await window.ChatAPIService.sendMessage({
|
|||
|
|
message: message,
|
|||
|
|
conversationId: targetChatId, // 使用保存的targetChatId
|
|||
|
|
mode: isDeepSearchActive ? 'research' : 'chat'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.success) {
|
|||
|
|
// 更新会话ID（如果是新会话）
|
|||
|
|
if (response.conversationId && !targetChatId) {
|
|||
|
|
const newChatId = response.conversationId;
|
|||
|
|
// 只有当前聊天与目标一致时才更新全局变量
|
|||
|
|
if (currentChatId === targetChatId) {
|
|||
|
|
currentChatId = newChatId;
|
|||
|
|
}
|
|||
|
|
if (window.chatManager) {
|
|||
|
|
window.chatManager.currentChatId = newChatId;
|
|||
|
|
}
|
|||
|
|
// 添加新会话到侧边栏
|
|||
|
|
const chatTitle = message.length > 20 ? message.substring(0, 20) + '...' : message;
|
|||
|
|
addChatToSidebar(newChatId, chatTitle, true);
|
|||
|
|
}
|
|||
|
|
// 使用addMessageToChat统一处理AI回复
|
|||
|
|
await addMessageToChat(response.answer, 'ai', targetChatId);
|
|||
|
|
} else {
|
|||
|
|
// 使用addMessageToChat统一处理错误消息
|
|||
|
|
await addMessageToChat('抱歉，获取回复时出现错误。', 'ai', targetChatId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 恢复发送状态
|
|||
|
|
window.isSubmitting = false;
|
|||
|
|
updateSendUI(false);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('发送消息失败:', error);
|
|||
|
|
// 使用addMessageToChat统一处理错误消息
|
|||
|
|
await addMessageToChat(`抱歉，发生了错误：${error.message}`, 'ai', targetChatId);
|
|||
|
|
window.isSubmitting = false;
|
|||
|
|
updateSendUI(false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新聚焦输入框
|
|||
|
|
messageInput.focus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 新增: 添加消息到指定的聊天记录
|
|||
|
|
async function addMessageToChat(content, type, chatId) {
|
|||
|
|
// 确保聊天容器已显示
|
|||
|
|
showChatContainer();
|
|||
|
|
|
|||
|
|
// 使用新的聊天管理器
|
|||
|
|
if (window.chatManager && chatId) {
|
|||
|
|
// 只有登录用户才保存聊天记录
|
|||
|
|
if (window.chatManager.getCurrentUser()) {
|
|||
|
|
// 临时切换到目标聊天ID
|
|||
|
|
const originalChatId = window.chatManager.currentChatId;
|
|||
|
|
window.chatManager.currentChatId = chatId;
|
|||
|
|
const message = window.chatManager.addMessage(content, type);
|
|||
|
|
// 恢复原来的聊天ID
|
|||
|
|
window.chatManager.currentChatId = originalChatId;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果启用了在线模式，同步到服务器
|
|||
|
|
if (isOnlineMode && window.ChatAPIService) {
|
|||
|
|
try {
|
|||
|
|
await window.ChatAPIService.addMessage(chatId, {
|
|||
|
|
content,
|
|||
|
|
type,
|
|||
|
|
metadata: {}
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('同步消息到服务器失败:', error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 兼容旧的存储方式
|
|||
|
|
if (chatId && chatHistoryData.has(chatId)) {
|
|||
|
|
const chatHistory = chatHistoryData.get(chatId);
|
|||
|
|
chatHistory.push({
|
|||
|
|
content: content,
|
|||
|
|
type: type,
|
|||
|
|
timestamp: new Date().toISOString()
|
|||
|
|
});
|
|||
|
|
chatHistoryData.set(chatId, chatHistory);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 只有当前聊天ID与目标ID一致时才更新UI（不保存数据，避免重复）
|
|||
|
|
if (chatId === currentChatId) {
|
|||
|
|
await addMessageToUI(content, type);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 新增: 只更新UI的函数（不保存数据）
|
|||
|
|
async function addMessageToUI(content, type) {
|
|||
|
|
// 确保聊天容器已显示
|
|||
|
|
showChatContainer();
|
|||
|
|
|
|||
|
|
// 获取聊天消息容器
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
if (!chatMessages) {
|
|||
|
|
console.error('聊天消息容器未找到');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const messageItem = document.createElement('div');
|
|||
|
|
messageItem.className = 'message-item mb-4';
|
|||
|
|
|
|||
|
|
const isUser = type === 'user';
|
|||
|
|
const currentTime = new Date().toLocaleTimeString('zh-CN', {
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 渲染内容（支持Markdown）
|
|||
|
|
let renderedContent = content;
|
|||
|
|
if (window.markdownRenderer) {
|
|||
|
|
renderedContent = window.markdownRenderer.render(content);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isUser) {
|
|||
|
|
messageItem.innerHTML = `
|
|||
|
|
<div class="flex justify-end">
|
|||
|
|
<div class="message user-message px-4 py-3">
|
|||
|
|
<div class="text-sm text-gray-800 markdown-content">${renderedContent}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-xs text-gray-500 text-right mt-1">${currentTime}</div>
|
|||
|
|
`;
|
|||
|
|
} else {
|
|||
|
|
messageItem.innerHTML = `
|
|||
|
|
<div class="flex justify-start">
|
|||
|
|
<div class="message ai-message px-4 py-3">
|
|||
|
|
<div class="text-sm text-gray-800 markdown-content">${renderedContent}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-xs text-gray-500 mt-1">${currentTime}</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
chatMessages.appendChild(messageItem);
|
|||
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function addMessage(content, type) {
|
|||
|
|
// 确保聊天容器已显示
|
|||
|
|
showChatContainer();
|
|||
|
|
|
|||
|
|
// 使用新的聊天管理器
|
|||
|
|
if (window.chatManager && currentChatId) {
|
|||
|
|
// 只有登录用户才保存聊天记录
|
|||
|
|
if (window.chatManager.getCurrentUser()) {
|
|||
|
|
const message = window.chatManager.addMessage(content, type);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果启用了在线模式，同步到服务器
|
|||
|
|
if (isOnlineMode && window.ChatAPIService) {
|
|||
|
|
try {
|
|||
|
|
await window.ChatAPIService.addMessage(currentChatId, {
|
|||
|
|
content,
|
|||
|
|
type,
|
|||
|
|
metadata: {}
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('同步消息到服务器失败:', error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 兼容旧的存储方式
|
|||
|
|
if (currentChatId && chatHistoryData.has(currentChatId)) {
|
|||
|
|
const chatHistory = chatHistoryData.get(currentChatId);
|
|||
|
|
chatHistory.push({
|
|||
|
|
content: content,
|
|||
|
|
type: type,
|
|||
|
|
timestamp: new Date().toISOString()
|
|||
|
|
});
|
|||
|
|
chatHistoryData.set(currentChatId, chatHistory);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取聊天消息容器
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
if (!chatMessages) {
|
|||
|
|
console.error('聊天消息容器未找到');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const messageItem = document.createElement('div');
|
|||
|
|
messageItem.className = 'message-item mb-4';
|
|||
|
|
|
|||
|
|
const isUser = type === 'user';
|
|||
|
|
const currentTime = new Date().toLocaleTimeString('zh-CN', {
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 渲染内容（支持Markdown）
|
|||
|
|
let renderedContent = content;
|
|||
|
|
if (window.markdownRenderer) {
|
|||
|
|
renderedContent = window.markdownRenderer.render(content);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isUser) {
|
|||
|
|
messageItem.innerHTML = `
|
|||
|
|
<div class="flex justify-end">
|
|||
|
|
<div class="message user-message px-4 py-3">
|
|||
|
|
<div class="text-sm text-gray-800 markdown-content">${renderedContent}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-xs text-gray-500 text-right mt-1">${currentTime}</div>
|
|||
|
|
`;
|
|||
|
|
} else {
|
|||
|
|
messageItem.innerHTML = `
|
|||
|
|
<div class="flex justify-start">
|
|||
|
|
<div class="message ai-message px-4 py-3">
|
|||
|
|
<div class="text-sm text-gray-800 markdown-content">${renderedContent}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-xs text-gray-500 mt-1">${currentTime}</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
chatMessages.appendChild(messageItem);
|
|||
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加流式消息（用于实时更新）
|
|||
|
|
function addStreamMessage(content, type, messageId) {
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
if (!chatMessages) {
|
|||
|
|
console.error('聊天消息容器未找到');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let messageItem = document.getElementById(`message-${messageId}`);
|
|||
|
|
|
|||
|
|
if (!messageItem) {
|
|||
|
|
// 创建新消息元素
|
|||
|
|
messageItem = document.createElement('div');
|
|||
|
|
messageItem.id = `message-${messageId}`;
|
|||
|
|
messageItem.className = 'message-item mb-4';
|
|||
|
|
chatMessages.appendChild(messageItem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const currentTime = new Date().toLocaleTimeString('zh-CN', {
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 渲染内容（支持Markdown）
|
|||
|
|
let renderedContent = content;
|
|||
|
|
if (window.markdownRenderer) {
|
|||
|
|
renderedContent = window.markdownRenderer.render(content);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
messageItem.innerHTML = `
|
|||
|
|
<div class="flex justify-start">
|
|||
|
|
<div class="message ai-message px-4 py-3">
|
|||
|
|
<div class="text-sm text-gray-800 markdown-content">${renderedContent}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-xs text-gray-500 mt-1">${currentTime}</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新消息内容（用于流式更新）
|
|||
|
|
function updateMessageContent(messageId, content) {
|
|||
|
|
const messageItem = document.getElementById(`message-${messageId}`);
|
|||
|
|
if (!messageItem) return;
|
|||
|
|
|
|||
|
|
const contentDiv = messageItem.querySelector('.markdown-content');
|
|||
|
|
if (!contentDiv) return;
|
|||
|
|
|
|||
|
|
// 渲染内容（支持Markdown）
|
|||
|
|
let renderedContent = content;
|
|||
|
|
if (window.markdownRenderer) {
|
|||
|
|
renderedContent = window.markdownRenderer.render(content);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
contentDiv.innerHTML = renderedContent;
|
|||
|
|
|
|||
|
|
// 保持滚动在底部
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
if (chatMessages) {
|
|||
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 深度检索功能 ===== */
|
|||
|
|
function toggleDeepSearch() {
|
|||
|
|
isDeepSearchActive = !isDeepSearchActive;
|
|||
|
|
const deepSearchToggle = document.getElementById('deepSearchToggle');
|
|||
|
|
|
|||
|
|
if (deepSearchToggle) {
|
|||
|
|
if (isDeepSearchActive) {
|
|||
|
|
deepSearchToggle.classList.add('active');
|
|||
|
|
deepSearchToggle.style.backgroundColor = '#dbeafe';
|
|||
|
|
deepSearchToggle.style.borderColor = '#3b82f6';
|
|||
|
|
deepSearchToggle.style.color = '#1d4ed8';
|
|||
|
|
} else {
|
|||
|
|
deepSearchToggle.classList.remove('active');
|
|||
|
|
deepSearchToggle.style.backgroundColor = '';
|
|||
|
|
deepSearchToggle.style.borderColor = '';
|
|||
|
|
deepSearchToggle.style.color = '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('深度检索状态:', isDeepSearchActive);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 用户下拉菜单 ===== */
|
|||
|
|
function initUserDropdown() {
|
|||
|
|
const userMenuToggle = document.getElementById('userMenuToggle');
|
|||
|
|
const userDropdown = document.getElementById('userDropdown');
|
|||
|
|
|
|||
|
|
if (!userMenuToggle || !userDropdown) return;
|
|||
|
|
|
|||
|
|
userMenuToggle.addEventListener('click', function(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
console.log('用户菜单被点击');
|
|||
|
|
toggleDropdown();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击其他地方关闭下拉菜单
|
|||
|
|
document.addEventListener('click', function(e) {
|
|||
|
|
if (!userDropdown.contains(e.target)) {
|
|||
|
|
closeDropdown();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function toggleDropdown() {
|
|||
|
|
if (userDropdown.classList.contains('hidden')) {
|
|||
|
|
userDropdown.classList.remove('hidden');
|
|||
|
|
console.log('打开用户下拉菜单');
|
|||
|
|
} else {
|
|||
|
|
userDropdown.classList.add('hidden');
|
|||
|
|
console.log('关闭用户下拉菜单');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeDropdown() {
|
|||
|
|
userDropdown.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 下载弹窗功能 ===== */
|
|||
|
|
function initDownloadModal() {
|
|||
|
|
const downloadBtn = document.getElementById('downloadBtn');
|
|||
|
|
const downloadAppBtn = document.getElementById('downloadAppBtn');
|
|||
|
|
const downloadModal = document.getElementById('downloadModal');
|
|||
|
|
const closeDownloadModal = document.getElementById('closeDownloadModal');
|
|||
|
|
|
|||
|
|
if (!downloadModal || !closeDownloadModal) return;
|
|||
|
|
|
|||
|
|
// 折叠栏下载按钮点击事件
|
|||
|
|
if (downloadBtn) {
|
|||
|
|
downloadBtn.addEventListener('click', function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
downloadModal.classList.remove('hidden');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 侧边栏下载APP按钮点击事件
|
|||
|
|
if (downloadAppBtn) {
|
|||
|
|
downloadAppBtn.addEventListener('click', function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
downloadModal.classList.remove('hidden');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭下载弹窗
|
|||
|
|
closeDownloadModal.addEventListener('click', function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
downloadModal.classList.add('hidden');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击遮罩层关闭弹窗
|
|||
|
|
downloadModal.addEventListener('click', function(e) {
|
|||
|
|
if (e.target === downloadModal) {
|
|||
|
|
downloadModal.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 搜索功能 ===== */
|
|||
|
|
function initSearch() {
|
|||
|
|
const searchInput = document.getElementById('searchInput');
|
|||
|
|
|
|||
|
|
if (!searchInput) return;
|
|||
|
|
|
|||
|
|
searchInput.addEventListener('input', function() {
|
|||
|
|
const searchTerm = this.value.toLowerCase().trim();
|
|||
|
|
const chatItems = document.querySelectorAll('.chat-item');
|
|||
|
|
|
|||
|
|
chatItems.forEach(item => {
|
|||
|
|
const text = item.textContent.toLowerCase();
|
|||
|
|
if (text.includes(searchTerm) || searchTerm === '') {
|
|||
|
|
item.style.display = '';
|
|||
|
|
} else {
|
|||
|
|
item.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('搜索:', searchTerm);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 聊天历史功能 ===== */
|
|||
|
|
function initChatHistoryActions() {
|
|||
|
|
const chatItems = document.querySelectorAll('.chat-item');
|
|||
|
|
|
|||
|
|
chatItems.forEach(item => {
|
|||
|
|
// 点击聊天项
|
|||
|
|
item.addEventListener('click', function(e) {
|
|||
|
|
if (!e.target.classList.contains('delete-chat')) {
|
|||
|
|
selectChatItem(this);
|
|||
|
|
console.log('选择聊天记录:', this.textContent.trim());
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 删除按钮
|
|||
|
|
const deleteBtn = item.querySelector('.delete-chat');
|
|||
|
|
if (deleteBtn) {
|
|||
|
|
deleteBtn.addEventListener('click', function(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
deleteChatSession(item);
|
|||
|
|
console.log('删除聊天记录');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function selectChatItem(item) {
|
|||
|
|
// 移除其他active状态
|
|||
|
|
document.querySelectorAll('.chat-history-item').forEach(chatItem => {
|
|||
|
|
chatItem.classList.remove('active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 添加active状态
|
|||
|
|
item.classList.add('active');
|
|||
|
|
|
|||
|
|
// 获取聊天ID
|
|||
|
|
const chatId = item.getAttribute('data-chat-id');
|
|||
|
|
|
|||
|
|
// 显示聊天容器
|
|||
|
|
showChatContainer();
|
|||
|
|
|
|||
|
|
// 加载对话内容
|
|||
|
|
if (chatId) {
|
|||
|
|
loadChatHistory(chatId);
|
|||
|
|
console.log('加载聊天历史:', chatId);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function deleteChatSession(item) {
|
|||
|
|
if (confirm('确定要删除这个对话吗？')) {
|
|||
|
|
item.remove();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 新建对话 ===== */
|
|||
|
|
function startNewChat() {
|
|||
|
|
// 清除active状态
|
|||
|
|
document.querySelectorAll('.chat-history-item').forEach(item => {
|
|||
|
|
item.classList.remove('active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 移除聊天模式类
|
|||
|
|
document.body.classList.remove('chat-mode');
|
|||
|
|
|
|||
|
|
// 切换回欢迎模式
|
|||
|
|
const chatContainer = document.getElementById('chatContainer');
|
|||
|
|
const welcomeMode = document.getElementById('welcomeMode');
|
|||
|
|
const chatModeInput = document.getElementById('chatModeInput');
|
|||
|
|
const tickerSection = document.querySelector('.ticker-section'); // 3D新闻卡片区域
|
|||
|
|
|
|||
|
|
if (chatContainer) {
|
|||
|
|
chatContainer.style.display = 'none';
|
|||
|
|
|
|||
|
|
// 恢复动画和轮播
|
|||
|
|
if (window.chatModeOptimizer) {
|
|||
|
|
window.chatModeOptimizer.resume();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (welcomeMode) {
|
|||
|
|
welcomeMode.style.display = 'flex'; // 使用flex保持居中布局
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (chatModeInput) {
|
|||
|
|
chatModeInput.classList.add('hidden');
|
|||
|
|
chatModeInput.style.display = 'none'; // 确保完全隐藏
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示3D新闻卡片区域
|
|||
|
|
if (tickerSection) {
|
|||
|
|
tickerSection.style.display = 'block';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重置当前聊天ID
|
|||
|
|
currentChatId = null;
|
|||
|
|
|
|||
|
|
// 使用聊天管理器开始新聊天
|
|||
|
|
if (window.chatManager) {
|
|||
|
|
window.chatManager.startNewChat();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 聚焦输入框
|
|||
|
|
const messageInput = document.getElementById('messageInput');
|
|||
|
|
if (messageInput) {
|
|||
|
|
messageInput.focus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果当前正在提交消息，保持等待状态
|
|||
|
|
if (window.isSubmitting) {
|
|||
|
|
updateSendUI(true);
|
|||
|
|
console.log('返回首页，保持等待状态');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('开始新对话，恢复欢迎界面和3D图片');
|
|||
|
|
|
|||
|
|
// 重新初始化文字轮播（延迟执行确保DOM已更新）
|
|||
|
|
setTimeout(() => {
|
|||
|
|
console.log('重新初始化文字轮播...');
|
|||
|
|
initTextRotator();
|
|||
|
|
}, 300);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 辅助函数 ===== */
|
|||
|
|
function showChatContainer() {
|
|||
|
|
const chatContainer = document.getElementById('chatContainer');
|
|||
|
|
const welcomeMode = document.getElementById('welcomeMode');
|
|||
|
|
const chatModeInput = document.getElementById('chatModeInput');
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
const bottomFunctionArea = document.querySelector('.flex-shrink-0'); // 底部功能区
|
|||
|
|
const tickerSection = document.querySelector('.ticker-section'); // 3D新闻卡片区域
|
|||
|
|
|
|||
|
|
if (chatContainer && welcomeMode && chatModeInput) {
|
|||
|
|
// 添加聊天模式类到body
|
|||
|
|
document.body.classList.add('chat-mode');
|
|||
|
|
|
|||
|
|
// 隐藏欢迎模式
|
|||
|
|
welcomeMode.style.display = 'none';
|
|||
|
|
|
|||
|
|
// 隐藏底部功能区
|
|||
|
|
if (bottomFunctionArea) {
|
|||
|
|
bottomFunctionArea.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 隐藏3D新闻卡片区域
|
|||
|
|
if (tickerSection) {
|
|||
|
|
tickerSection.style.display = 'none';
|
|||
|
|
console.log('showChatContainer: 隐藏3D图片');
|
|||
|
|
} else {
|
|||
|
|
console.log('showChatContainer: 未找到ticker-section');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示聊天容器（全屏）
|
|||
|
|
chatContainer.style.display = 'block';
|
|||
|
|
|
|||
|
|
// 优化聊天模式性能 - 暂停动画和轮播
|
|||
|
|
if (window.chatModeOptimizer) {
|
|||
|
|
window.chatModeOptimizer.pause();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确保聊天消息容器可见
|
|||
|
|
if (chatMessages) {
|
|||
|
|
chatMessages.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示底部固定输入框
|
|||
|
|
chatModeInput.classList.remove('hidden');
|
|||
|
|
chatModeInput.style.display = 'block'; // 确保显示
|
|||
|
|
|
|||
|
|
// 如果当前正在提交消息，确保聊天模式也显示等待状态
|
|||
|
|
if (window.isSubmitting) {
|
|||
|
|
updateSendUI(true);
|
|||
|
|
console.log('切换到聊天模式，保持等待状态');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('切换到聊天模式：隐藏欢迎区、3D图片和底部功能区，输入框下沉到底部，聊天窗口全屏显示');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function createNewChatSession(firstMessage) {
|
|||
|
|
// 使用后端会话管理，不再创建本地会话ID
|
|||
|
|
// 会话ID将在第一次发送消息后由后端返回
|
|||
|
|
console.log('准备创建新会话，等待后端返回会话ID');
|
|||
|
|
|
|||
|
|
// 清空当前会话ID，让后端创建新会话
|
|||
|
|
currentChatId = null;
|
|||
|
|
|
|||
|
|
// 如果使用本地聊天管理器（离线模式）
|
|||
|
|
if (window.chatManager && !window.ChatAPIService) {
|
|||
|
|
const chatId = window.chatManager.createChat(firstMessage);
|
|||
|
|
const chat = window.chatManager.getChat(chatId);
|
|||
|
|
const chatTitle = chat ? chat.title : '新对话';
|
|||
|
|
|
|||
|
|
// 添加到侧边栏
|
|||
|
|
addChatToSidebar(chatId, chatTitle);
|
|||
|
|
|
|||
|
|
return chatId;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用后端API时，返回null，会话ID将在第一次消息响应时获得
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addChatToSidebar(chatId, title, shouldSelect = false) {
|
|||
|
|
const chatHistory = document.querySelector('.chat-history-list');
|
|||
|
|
if (!chatHistory) return;
|
|||
|
|
|
|||
|
|
// 检查会话是否已经存在于侧边栏
|
|||
|
|
const existingItem = chatHistory.querySelector(`[data-chat-id="${chatId}"]`);
|
|||
|
|
if (existingItem) {
|
|||
|
|
console.log(`会话 ${chatId} 已存在于侧边栏，跳过添加`);
|
|||
|
|
// 如果需要选中，直接选中现有项
|
|||
|
|
if (shouldSelect) {
|
|||
|
|
existingItem.click();
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建新的聊天项
|
|||
|
|
const chatItem = document.createElement('div');
|
|||
|
|
chatItem.className = 'chat-history-item';
|
|||
|
|
chatItem.setAttribute('data-chat-id', chatId);
|
|||
|
|
|
|||
|
|
chatItem.innerHTML = `
|
|||
|
|
<div class="chat-title">${title}</div>
|
|||
|
|
<button class="delete-chat" style="display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #999; cursor: pointer;">
|
|||
|
|
<i class="fas fa-trash"></i>
|
|||
|
|
</button>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// 添加鼠标悬停显示删除按钮
|
|||
|
|
chatItem.addEventListener('mouseenter', function() {
|
|||
|
|
const deleteBtn = this.querySelector('.delete-chat');
|
|||
|
|
if (deleteBtn) deleteBtn.style.display = 'block';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
chatItem.addEventListener('mouseleave', function() {
|
|||
|
|
const deleteBtn = this.querySelector('.delete-chat');
|
|||
|
|
if (deleteBtn) deleteBtn.style.display = 'none';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 添加事件监听器
|
|||
|
|
chatItem.addEventListener('click', function(e) {
|
|||
|
|
if (!e.target.classList.contains('delete-chat') && !e.target.closest('.delete-chat')) {
|
|||
|
|
selectChatItem(this);
|
|||
|
|
console.log('选择聊天记录:', title);
|
|||
|
|
|
|||
|
|
// 切换到选中的聊天
|
|||
|
|
if (window.chatManager) {
|
|||
|
|
const switched = window.chatManager.switchToChat(chatId);
|
|||
|
|
console.log('切换聊天结果:', switched);
|
|||
|
|
if (!switched) {
|
|||
|
|
console.error('聊天切换失败，聊天ID不存在:', chatId);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 兼容旧方式
|
|||
|
|
loadChatHistory(chatId);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const deleteBtn = chatItem.querySelector('.delete-chat');
|
|||
|
|
if (deleteBtn) {
|
|||
|
|
deleteBtn.addEventListener('click', function(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
|
|||
|
|
// 使用新的聊天管理器删除
|
|||
|
|
if (window.chatManager) {
|
|||
|
|
const confirmDelete = confirm('确定要删除这个聊天记录吗？');
|
|||
|
|
if (confirmDelete) {
|
|||
|
|
window.chatManager.deleteChat(chatId);
|
|||
|
|
console.log('删除聊天记录:', chatId);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 兼容旧方式
|
|||
|
|
deleteChatSession(chatItem);
|
|||
|
|
console.log('删除聊天记录');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 将新聊天添加到"今天"分组的第一项
|
|||
|
|
const todaySection = chatHistory;
|
|||
|
|
todaySection.insertBefore(chatItem, todaySection.firstChild);
|
|||
|
|
|
|||
|
|
// 只在需要时选中聊天（比如新创建时）
|
|||
|
|
if (shouldSelect) {
|
|||
|
|
selectChatItem(chatItem);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function generateAIResponse(message) {
|
|||
|
|
// 根据用户输入生成包含Markdown格式的响应
|
|||
|
|
const markdownResponses = [
|
|||
|
|
`感谢您的提问！我正在为您分析这个问题。
|
|||
|
|
|
|||
|
|
## 主要观点
|
|||
|
|
|
|||
|
|
1. **第一点**：这是一个重要的考虑因素
|
|||
|
|
2. **第二点**：需要注意相关的细节
|
|||
|
|
3. **第三点**：可以从多个角度来理解
|
|||
|
|
|
|||
|
|
### 补充说明
|
|||
|
|
> 这是一段引用，包含了一些额外的信息。
|
|||
|
|
|
|||
|
|
您还有其他问题吗？`,
|
|||
|
|
|
|||
|
|
`这是一个很有趣的话题，让我为您详细解答。
|
|||
|
|
|
|||
|
|
### 关键概念
|
|||
|
|
- **概念A**：基础定义和说明
|
|||
|
|
- **概念B**：深入理解的要点
|
|||
|
|
- **概念C**：实际应用场景
|
|||
|
|
|
|||
|
|
\`\`\`javascript
|
|||
|
|
// 示例代码
|
|||
|
|
function example() {
|
|||
|
|
console.log("Hello, World!");
|
|||
|
|
}
|
|||
|
|
\`\`\`
|
|||
|
|
|
|||
|
|
希望这些信息对您有所帮助！`,
|
|||
|
|
|
|||
|
|
`根据您的问题，我建议从以下几个方面来考虑：
|
|||
|
|
|
|||
|
|
1. **技术层面**
|
|||
|
|
- 考虑点1
|
|||
|
|
- 考虑点2
|
|||
|
|
|
|||
|
|
2. **实践层面**
|
|||
|
|
- 实施步骤A
|
|||
|
|
- 实施步骤B
|
|||
|
|
|
|||
|
|
### 相关资源
|
|||
|
|
- [参考链接1](https://example.com)
|
|||
|
|
- [参考链接2](https://example.com)
|
|||
|
|
|
|||
|
|
*注意*：请根据实际情况调整方案。`,
|
|||
|
|
|
|||
|
|
`我理解您的需求，这里有一些相关的信息可能对您有帮助。
|
|||
|
|
|
|||
|
|
## 解决方案
|
|||
|
|
|
|||
|
|
### 方案一：快速实现
|
|||
|
|
\`\`\`bash
|
|||
|
|
# 命令行示例
|
|||
|
|
npm install package-name
|
|||
|
|
npm run start
|
|||
|
|
\`\`\`
|
|||
|
|
|
|||
|
|
### 方案二：完整配置
|
|||
|
|
1. 首先，创建配置文件
|
|||
|
|
2. 然后，设置必要的参数
|
|||
|
|
3. 最后，运行测试验证
|
|||
|
|
|
|||
|
|
**提示**：记得检查兼容性问题。`,
|
|||
|
|
|
|||
|
|
`让我为您提供一些相关的建议和解决方案。
|
|||
|
|
|
|||
|
|
## 核心要点
|
|||
|
|
|
|||
|
|
| 特性 | 描述 | 优先级 |
|
|||
|
|
|------|------|--------|
|
|||
|
|
| 性能 | 优化响应速度 | 高 |
|
|||
|
|
| 安全 | 加强数据保护 | 高 |
|
|||
|
|
| 易用 | 改善用户体验 | 中 |
|
|||
|
|
|
|||
|
|
### 实施建议
|
|||
|
|
> 💡 **最佳实践**：始终遵循行业标准和规范。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
如需更多帮助，请随时告诉我！`
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 检查用户消息是否包含代码相关关键词
|
|||
|
|
const codeKeywords = ['代码', 'code', '函数', 'function', '编程', 'programming', 'bug', '错误', 'error'];
|
|||
|
|
const hasCodeContext = codeKeywords.some(keyword => message.toLowerCase().includes(keyword));
|
|||
|
|
|
|||
|
|
if (hasCodeContext) {
|
|||
|
|
// 如果是代码相关问题，返回包含代码块的响应
|
|||
|
|
return markdownResponses[1]; // 返回包含代码示例的响应
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 随机返回一个Markdown格式的响应
|
|||
|
|
return markdownResponses[Math.floor(Math.random() * markdownResponses.length)];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除旧的loadChatHistory函数，使用后面定义的新版本
|
|||
|
|
|
|||
|
|
/* ===== 文字轮播技术 ===== */
|
|||
|
|
function initTextRotator() {
|
|||
|
|
// 文字轮播功能
|
|||
|
|
class TextRotator {
|
|||
|
|
constructor(options) {
|
|||
|
|
this.element = document.querySelector(options.selector);
|
|||
|
|
this.words = options.words || ['资料', '专家', '活动', '标准', '合作'];
|
|||
|
|
this.interval = options.interval || 2500;
|
|||
|
|
this.currentIndex = 0;
|
|||
|
|
this.isAnimating = false;
|
|||
|
|
|
|||
|
|
if (this.element) {
|
|||
|
|
this.init();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
init() {
|
|||
|
|
// 开始时显示第一个词
|
|||
|
|
this.element.textContent = this.words[0];
|
|||
|
|
console.log('文字轮播初始化:', this.words[0]);
|
|||
|
|
|
|||
|
|
// 等待一段时间后开始轮播
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.startRotation();
|
|||
|
|
console.log('开始文字轮播');
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
startRotation() {
|
|||
|
|
setInterval(() => {
|
|||
|
|
this.rotateText();
|
|||
|
|
}, this.interval);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
rotateText() {
|
|||
|
|
if (this.isAnimating) return;
|
|||
|
|
|
|||
|
|
this.isAnimating = true;
|
|||
|
|
const nextWord = this.words[(this.currentIndex + 1) % this.words.length];
|
|||
|
|
console.log('轮播切换到:', nextWord);
|
|||
|
|
|
|||
|
|
// 同时获取倒影元素
|
|||
|
|
const reflectionElement = document.querySelector('#rotating-word-reflection');
|
|||
|
|
|
|||
|
|
// 退出动画
|
|||
|
|
this.element.style.transition = 'all 0.2s ease-out';
|
|||
|
|
this.element.style.opacity = '0';
|
|||
|
|
this.element.style.transform = 'translateY(-10px) scale(1.02)';
|
|||
|
|
|
|||
|
|
if (reflectionElement) {
|
|||
|
|
reflectionElement.style.transition = 'all 0.2s ease-out';
|
|||
|
|
reflectionElement.style.opacity = '0';
|
|||
|
|
reflectionElement.style.transform = 'translateY(10px) scale(1.02)';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 更换文字
|
|||
|
|
this.currentIndex = (this.currentIndex + 1) % this.words.length;
|
|||
|
|
this.element.textContent = this.words[this.currentIndex];
|
|||
|
|
if (reflectionElement) {
|
|||
|
|
reflectionElement.textContent = this.words[this.currentIndex];
|
|||
|
|
}
|
|||
|
|
console.log('文字已更换为:', this.words[this.currentIndex]);
|
|||
|
|
|
|||
|
|
// 重置位置准备进入动画
|
|||
|
|
this.element.style.transition = 'none';
|
|||
|
|
this.element.style.transform = 'translateY(10px) scale(0.98)';
|
|||
|
|
this.element.style.opacity = '0';
|
|||
|
|
|
|||
|
|
if (reflectionElement) {
|
|||
|
|
reflectionElement.style.transition = 'none';
|
|||
|
|
reflectionElement.style.transform = 'translateY(-10px) scale(0.98)';
|
|||
|
|
reflectionElement.style.opacity = '0';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 强制重绘
|
|||
|
|
requestAnimationFrame(() => {
|
|||
|
|
// 进入动画
|
|||
|
|
this.element.style.transition = 'all 0.3s ease-out';
|
|||
|
|
this.element.style.opacity = '1';
|
|||
|
|
this.element.style.transform = 'translateY(0) scale(1)';
|
|||
|
|
|
|||
|
|
if (reflectionElement) {
|
|||
|
|
reflectionElement.style.transition = 'all 0.3s ease-out';
|
|||
|
|
reflectionElement.style.opacity = '0.7';
|
|||
|
|
reflectionElement.style.transform = 'translateY(0) scale(1)';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.isAnimating = false;
|
|||
|
|
console.log('动画完成');
|
|||
|
|
}, 300);
|
|||
|
|
});
|
|||
|
|
}, 200);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化文字轮播
|
|||
|
|
const rotatingElement = document.querySelector('#rotating-word');
|
|||
|
|
console.log('轮播元素查找结果:', rotatingElement);
|
|||
|
|
|
|||
|
|
if (rotatingElement) {
|
|||
|
|
const textRotator = new TextRotator({
|
|||
|
|
selector: '#rotating-word',
|
|||
|
|
words: ['资料', '专家', '活动', '标准', '合作'],
|
|||
|
|
interval: 2500
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 添加点击跳转功能和波纹效果
|
|||
|
|
rotatingElement.addEventListener('click', function(e) {
|
|||
|
|
console.log('点击轮播文字:', this.textContent);
|
|||
|
|
|
|||
|
|
// 创建波纹效果
|
|||
|
|
const ripple = document.createElement('div');
|
|||
|
|
const rect = this.getBoundingClientRect();
|
|||
|
|
const size = Math.max(rect.width, rect.height);
|
|||
|
|
const x = e.clientX - rect.left - size / 2;
|
|||
|
|
const y = e.clientY - rect.top - size / 2;
|
|||
|
|
|
|||
|
|
ripple.style.cssText = `
|
|||
|
|
position: absolute;
|
|||
|
|
width: ${size}px;
|
|||
|
|
height: ${size}px;
|
|||
|
|
left: ${x}px;
|
|||
|
|
top: ${y}px;
|
|||
|
|
background: radial-gradient(circle, rgba(30, 64, 175, 0.3) 0%, transparent 70%);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
transform: scale(0);
|
|||
|
|
animation: ripple 0.6s ease-out;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 1;
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
this.style.position = 'relative';
|
|||
|
|
this.appendChild(ripple);
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
ripple.remove();
|
|||
|
|
}, 600);
|
|||
|
|
|
|||
|
|
// 跳转到新窗口
|
|||
|
|
window.open('https://yundage.com/home', '_blank');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 3D鼠标跟随效果已移除，保持静态显示
|
|||
|
|
} else {
|
|||
|
|
console.error('未找到轮播元素 #rotating-word');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 鼠标跟随翻转卡片新闻跑马灯功能 ===== */
|
|||
|
|
function init3DTicker() {
|
|||
|
|
const ticker3D = document.getElementById('ticker3D');
|
|||
|
|
const tickerCarousel = document.getElementById('tickerCarousel');
|
|||
|
|
const tickerParticles = document.getElementById('tickerParticles');
|
|||
|
|
|
|||
|
|
if (!ticker3D || !tickerCarousel || !tickerParticles) {
|
|||
|
|
console.log('翻转卡片跑马灯元素未找到');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('初始化鼠标跟随翻转卡片新闻跑马灯');
|
|||
|
|
|
|||
|
|
let newsIndex = 0;
|
|||
|
|
|
|||
|
|
// 新闻图片数据，对应images目录下的新闻1-10.png
|
|||
|
|
const newsData = [
|
|||
|
|
{ image: '新闻1.png', alt: '新闻1' },
|
|||
|
|
{ image: '新闻2.png', alt: '新闻2' },
|
|||
|
|
{ image: '新闻3.png', alt: '新闻3' },
|
|||
|
|
{ image: '新闻4.png', alt: '新闻4' },
|
|||
|
|
{ image: '新闻5.png', alt: '新闻5' },
|
|||
|
|
{ image: '新闻6.png', alt: '新闻6' },
|
|||
|
|
{ image: '新闻7.png', alt: '新闻7' },
|
|||
|
|
{ image: '新闻8.png', alt: '新闻8' },
|
|||
|
|
{ image: '新闻9.png', alt: '新闻9' },
|
|||
|
|
{ image: '新闻10.png', alt: '新闻10' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 创建背景粒子
|
|||
|
|
function createTickerParticles() {
|
|||
|
|
tickerParticles.innerHTML = '';
|
|||
|
|
|
|||
|
|
for (let i = 0; i < 8; i++) {
|
|||
|
|
const particle = document.createElement('div');
|
|||
|
|
particle.className = 'ticker-particle';
|
|||
|
|
particle.style.left = Math.random() * 100 + '%';
|
|||
|
|
particle.style.animationDelay = Math.random() * 8 + 's';
|
|||
|
|
particle.style.animationDuration = (Math.random() * 4 + 6) + 's';
|
|||
|
|
tickerParticles.appendChild(particle);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 双向鼠标跟随翻转效果
|
|||
|
|
function initMouseFollowFlip() {
|
|||
|
|
const cards = tickerCarousel.querySelectorAll('.ticker-flip-card');
|
|||
|
|
let lastMouseX = 0;
|
|||
|
|
let lastDirection = 0; // -1左，1右，0静止
|
|||
|
|
|
|||
|
|
// 鼠标移动事件
|
|||
|
|
ticker3D.addEventListener('mousemove', function(e) {
|
|||
|
|
const rect = ticker3D.getBoundingClientRect();
|
|||
|
|
const mouseX = e.clientX - rect.left;
|
|||
|
|
|
|||
|
|
// 计算鼠标移动方向
|
|||
|
|
const direction = mouseX > lastMouseX ? 1 : mouseX < lastMouseX ? -1 : 0;
|
|||
|
|
if (direction !== 0) {
|
|||
|
|
lastDirection = direction;
|
|||
|
|
}
|
|||
|
|
lastMouseX = mouseX;
|
|||
|
|
|
|||
|
|
// 为每个卡片计算翻转角度
|
|||
|
|
cards.forEach((card, index) => {
|
|||
|
|
const cardRect = card.getBoundingClientRect();
|
|||
|
|
const cardLeft = cardRect.left - rect.left;
|
|||
|
|
const cardRight = cardLeft + cardRect.width;
|
|||
|
|
const cardWidth = cardRect.width;
|
|||
|
|
const cardCenter = cardLeft + cardWidth / 2;
|
|||
|
|
|
|||
|
|
// 计算鼠标到卡片中心的距离
|
|||
|
|
const distanceToCenter = Math.abs(mouseX - cardCenter);
|
|||
|
|
const maxDistance = cardWidth * 2; // 影响范围扩大到卡片宽度的2倍
|
|||
|
|
|
|||
|
|
// 基础翻转进度（基于鼠标在卡片中的位置）
|
|||
|
|
let baseProgress = 0;
|
|||
|
|
|
|||
|
|
if (mouseX >= cardLeft && mouseX <= cardRight) {
|
|||
|
|
// 鼠标在卡片范围内
|
|||
|
|
baseProgress = (mouseX - cardLeft) / cardWidth;
|
|||
|
|
} else if (mouseX < cardLeft) {
|
|||
|
|
// 鼠标在卡片左侧
|
|||
|
|
const distanceFromLeft = cardLeft - mouseX;
|
|||
|
|
baseProgress = Math.max(0, 1 - (distanceFromLeft / cardWidth));
|
|||
|
|
} else {
|
|||
|
|
// 鼠标在卡片右侧
|
|||
|
|
const distanceFromRight = mouseX - cardRight;
|
|||
|
|
baseProgress = Math.max(0, 1 - (distanceFromRight / cardWidth));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 邻近卡片的影响（双向）
|
|||
|
|
let neighborInfluence = 0;
|
|||
|
|
|
|||
|
|
// 检查相邻卡片的影响
|
|||
|
|
for (let i = 0; i < cards.length; i++) {
|
|||
|
|
if (i === index) continue;
|
|||
|
|
|
|||
|
|
const neighborCard = cards[i];
|
|||
|
|
const neighborRect = neighborCard.getBoundingClientRect();
|
|||
|
|
const neighborLeft = neighborRect.left - rect.left;
|
|||
|
|
const neighborRight = neighborLeft + neighborRect.width;
|
|||
|
|
const neighborCenter = neighborLeft + neighborRect.width / 2;
|
|||
|
|
|
|||
|
|
// 如果鼠标在相邻卡片上，计算对当前卡片的影响
|
|||
|
|
if (mouseX >= neighborLeft && mouseX <= neighborRight) {
|
|||
|
|
const neighborProgress = (mouseX - neighborLeft) / neighborRect.width;
|
|||
|
|
const distance = Math.abs(index - i);
|
|||
|
|
const influence = neighborProgress * Math.pow(0.6, distance); // 距离越远影响越小
|
|||
|
|
|
|||
|
|
// 根据方向确定影响方式
|
|||
|
|
if ((i < index && lastDirection === 1) || (i > index && lastDirection === -1)) {
|
|||
|
|
neighborInfluence = Math.max(neighborInfluence, influence);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算最终翻转进度
|
|||
|
|
const finalProgress = Math.min(1, Math.max(0, baseProgress + neighborInfluence));
|
|||
|
|
|
|||
|
|
// 根据鼠标方向和位置决定翻转角度
|
|||
|
|
let rotationAngle = 0;
|
|||
|
|
|
|||
|
|
if (finalProgress > 0) {
|
|||
|
|
// 基础翻转角度
|
|||
|
|
rotationAngle = finalProgress * 180;
|
|||
|
|
|
|||
|
|
// 考虑方向性：从右往左时可能需要反向翻转
|
|||
|
|
if (lastDirection === -1 && mouseX < cardCenter) {
|
|||
|
|
// 从右往左且鼠标在卡片左侧时，使用反向翻转
|
|||
|
|
rotationAngle = (1 - finalProgress) * 180;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 应用真正的3D翻转效果
|
|||
|
|
const inner = card.querySelector('.flip-card-inner');
|
|||
|
|
if (inner) {
|
|||
|
|
inner.style.transform = `rotateY(${rotationAngle}deg)`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 调试信息（只显示第一张卡片）
|
|||
|
|
if (index === 0) {
|
|||
|
|
console.log(`Card ${index}: mouseX=${mouseX.toFixed(0)}, direction=${lastDirection}, baseProgress=${baseProgress.toFixed(2)}, neighborInfluence=${neighborInfluence.toFixed(2)}, rotation=${rotationAngle.toFixed(1)}°`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 鼠标离开时重置
|
|||
|
|
ticker3D.addEventListener('mouseleave', function() {
|
|||
|
|
cards.forEach(card => {
|
|||
|
|
const inner = card.querySelector('.flip-card-inner');
|
|||
|
|
if (inner) {
|
|||
|
|
inner.style.transform = 'rotateY(0deg)';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
lastMouseX = 0;
|
|||
|
|
lastDirection = 0;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 鼠标进入时记录初始位置
|
|||
|
|
ticker3D.addEventListener('mouseenter', function(e) {
|
|||
|
|
const rect = ticker3D.getBoundingClientRect();
|
|||
|
|
lastMouseX = e.clientX - rect.left;
|
|||
|
|
lastDirection = 0;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 新闻轮播功能 - 更新卡片内容
|
|||
|
|
function rotateNews() {
|
|||
|
|
const cards = tickerCarousel.querySelectorAll('.ticker-flip-card');
|
|||
|
|
|
|||
|
|
cards.forEach((card, index) => {
|
|||
|
|
const currentNewsIndex = (newsIndex + index) % newsData.length;
|
|||
|
|
const newsItem = newsData[currentNewsIndex];
|
|||
|
|
|
|||
|
|
// 更新正面图片
|
|||
|
|
const frontImage = card.querySelector('.flip-card-front .news-image');
|
|||
|
|
if (frontImage) {
|
|||
|
|
frontImage.src = `images/${newsItem.image}`;
|
|||
|
|
frontImage.alt = newsItem.alt;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新背面图片（保持一致）
|
|||
|
|
const backImage = card.querySelector('.flip-card-back .news-image');
|
|||
|
|
if (backImage) {
|
|||
|
|
backImage.src = `images/${newsItem.image}`;
|
|||
|
|
backImage.alt = newsItem.alt;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新data属性
|
|||
|
|
card.setAttribute('data-news', newsItem.alt);
|
|||
|
|
card.setAttribute('data-image', newsItem.image);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
newsIndex = (newsIndex + 1) % newsData.length;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 卡片点击事件
|
|||
|
|
function addCardListeners() {
|
|||
|
|
const cards = tickerCarousel.querySelectorAll('.ticker-flip-card');
|
|||
|
|
|
|||
|
|
cards.forEach(card => {
|
|||
|
|
card.addEventListener('click', function() {
|
|||
|
|
const newsText = this.getAttribute('data-news');
|
|||
|
|
console.log('点击新闻卡片:', newsText);
|
|||
|
|
// 点击后跳转到微信文章，在新窗口中打开
|
|||
|
|
window.open('https://mp.weixin.qq.com/s/QfUgaORgErymzezvSISlJQ', '_blank');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 悬停时暂停轮播
|
|||
|
|
card.addEventListener('mouseenter', function() {
|
|||
|
|
clearInterval(newsRotationInterval);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 离开时恢复轮播
|
|||
|
|
card.addEventListener('mouseleave', function() {
|
|||
|
|
startNewsRotation();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showNewsInChat(newsText) {
|
|||
|
|
const messageInput = document.getElementById('messageInput');
|
|||
|
|
if (messageInput) {
|
|||
|
|
const cleanText = newsText.replace(/[🔥📚👥🎯🤝🚀💡🌟]/g, '').trim();
|
|||
|
|
messageInput.value = `告诉我更多关于"${cleanText}"的信息`;
|
|||
|
|
messageInput.focus();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 启动新闻轮播
|
|||
|
|
let newsRotationInterval;
|
|||
|
|
function startNewsRotation() {
|
|||
|
|
clearInterval(newsRotationInterval);
|
|||
|
|
newsRotationInterval = setInterval(rotateNews, 5000); // 每5秒轮换一次
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 响应式处理
|
|||
|
|
function handleResize() {
|
|||
|
|
createTickerParticles();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化
|
|||
|
|
createTickerParticles();
|
|||
|
|
addCardListeners();
|
|||
|
|
startNewsRotation();
|
|||
|
|
initMouseFollowFlip(); // 初始化鼠标跟随翻转
|
|||
|
|
|
|||
|
|
window.addEventListener('resize', handleResize);
|
|||
|
|
|
|||
|
|
console.log('鼠标跟随翻转卡片新闻跑马灯初始化完成');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 聊天管理器相关功能 ===== */
|
|||
|
|
function initChatManagerListeners() {
|
|||
|
|
if (!window.chatManager) return;
|
|||
|
|
|
|||
|
|
// 监听聊天切换事件
|
|||
|
|
window.addEventListener('chatManager:chatSwitched', (e) => {
|
|||
|
|
const { chatId, chat } = e.detail;
|
|||
|
|
console.log('切换到聊天:', chatId);
|
|||
|
|
currentChatId = chatId;
|
|||
|
|
loadChatHistory(chatId);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听聊天删除事件
|
|||
|
|
window.addEventListener('chatManager:chatDeleted', (e) => {
|
|||
|
|
const { chatId } = e.detail;
|
|||
|
|
console.log('删除聊天:', chatId);
|
|||
|
|
// 从侧边栏移除
|
|||
|
|
const chatItem = document.querySelector(`[data-chat-id="${chatId}"]`);
|
|||
|
|
if (chatItem) {
|
|||
|
|
chatItem.remove();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听新聊天创建事件
|
|||
|
|
window.addEventListener('chatManager:newChatStarted', () => {
|
|||
|
|
console.log('新聊天事件已触发');
|
|||
|
|
// 不要在这里调用 startNewChat()，避免递归
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听聊天标题更新事件
|
|||
|
|
window.addEventListener('chatManager:chatTitleUpdated', (e) => {
|
|||
|
|
const { chatId, title } = e.detail;
|
|||
|
|
console.log('更新聊天标题:', chatId, title);
|
|||
|
|
// 更新侧边栏中的标题
|
|||
|
|
const chatItem = document.querySelector(`[data-chat-id="${chatId}"]`);
|
|||
|
|
if (chatItem) {
|
|||
|
|
const chatTitle = chatItem.querySelector('.chat-title');
|
|||
|
|
if (chatTitle) {
|
|||
|
|
chatTitle.textContent = title;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function loadUserChatHistory() {
|
|||
|
|
// 如果有后端API，从后端加载会话列表
|
|||
|
|
if (window.ChatAPIService) {
|
|||
|
|
try {
|
|||
|
|
const result = await window.ChatAPIService.getConversations();
|
|||
|
|
if (result.success) {
|
|||
|
|
// 清空现有的聊天历史显示
|
|||
|
|
const chatHistoryList = document.querySelector('.chat-history-list');
|
|||
|
|
if (chatHistoryList) {
|
|||
|
|
chatHistoryList.innerHTML = '';
|
|||
|
|
|
|||
|
|
// 添加每个会话到侧边栏
|
|||
|
|
result.conversations.forEach(conversation => {
|
|||
|
|
// 后端返回的会话格式可能是 {id, userId, title, mode, createdAt, updatedAt}
|
|||
|
|
addChatToSidebar(conversation.id, conversation.title || '新对话');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log(`从后端加载了 ${result.conversations.length} 个会话`);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载会话列表失败:', error);
|
|||
|
|
// 降级到本地存储
|
|||
|
|
loadLocalChatHistory();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 没有后端API，使用本地存储
|
|||
|
|
loadLocalChatHistory();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从本地存储加载聊天历史
|
|||
|
|
function loadLocalChatHistory() {
|
|||
|
|
if (!window.chatManager) return;
|
|||
|
|
|
|||
|
|
// 获取所有聊天
|
|||
|
|
const chats = window.chatManager.getAllChats();
|
|||
|
|
|
|||
|
|
// 清空现有的聊天历史显示
|
|||
|
|
const chatHistoryList = document.querySelector('.chat-history-list');
|
|||
|
|
if (chatHistoryList) {
|
|||
|
|
chatHistoryList.innerHTML = '';
|
|||
|
|
|
|||
|
|
// 添加每个聊天到侧边栏
|
|||
|
|
chats.forEach(chat => {
|
|||
|
|
addChatToSidebar(chat.id, chat.title);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log(`从本地加载了 ${chats.length} 个聊天历史`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 监听用户登录状态变化
|
|||
|
|
function initUserChangeListener() {
|
|||
|
|
let previousUser = localStorage.getItem('yundage_current_user');
|
|||
|
|
|
|||
|
|
// 监听 storage 事件（其他标签页的变化）
|
|||
|
|
window.addEventListener('storage', function(e) {
|
|||
|
|
if (e.key === 'yundage_current_user') {
|
|||
|
|
handleUserChange(e.oldValue, e.newValue);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 定期检查当前标签页的用户变化
|
|||
|
|
setInterval(() => {
|
|||
|
|
const currentUser = localStorage.getItem('yundage_current_user');
|
|||
|
|
if (currentUser !== previousUser) {
|
|||
|
|
handleUserChange(previousUser, currentUser);
|
|||
|
|
previousUser = currentUser;
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
// 监听聊天管理器的用户变化事件
|
|||
|
|
window.addEventListener('chatManager:userChanged', () => {
|
|||
|
|
loadUserChatHistory();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理用户变化
|
|||
|
|
function handleUserChange(oldUserStr, newUserStr) {
|
|||
|
|
console.log('检测到用户变化');
|
|||
|
|
|
|||
|
|
const oldUser = oldUserStr ? JSON.parse(oldUserStr) : null;
|
|||
|
|
const newUser = newUserStr ? JSON.parse(newUserStr) : null;
|
|||
|
|
|
|||
|
|
if (oldUser?.id !== newUser?.id) {
|
|||
|
|
console.log(`用户从 ${oldUser?.username || '未登录'} 切换到 ${newUser?.username || '未登录'}`);
|
|||
|
|
|
|||
|
|
// 重新加载聊天记录
|
|||
|
|
if (window.chatManager) {
|
|||
|
|
window.chatManager.reloadForUser();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清空当前显示的聊天内容
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
if (chatMessages) {
|
|||
|
|
chatMessages.innerHTML = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 切回欢迎界面
|
|||
|
|
startNewChat();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新loadChatHistory函数以使用新的聊天管理器
|
|||
|
|
async function loadChatHistory(chatId) {
|
|||
|
|
// 清空当前聊天显示
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
if (chatMessages) {
|
|||
|
|
chatMessages.innerHTML = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置当前聊天ID
|
|||
|
|
currentChatId = chatId;
|
|||
|
|
|
|||
|
|
// 直接使用本地存储加载消息
|
|||
|
|
// 因为HippoDeepService的getConversationMessages实际上也是从本地chatManager加载的
|
|||
|
|
// 避免重复加载导致消息显示两次
|
|||
|
|
loadLocalChatMessages(chatId);
|
|||
|
|
|
|||
|
|
// 显示聊天容器
|
|||
|
|
showChatContainer();
|
|||
|
|
|
|||
|
|
// 高亮当前聊天项
|
|||
|
|
highlightActiveChatItem(chatId);
|
|||
|
|
|
|||
|
|
// 强制触发一次布局重新计算，确保输入框宽度正确
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const chatModeInput = document.getElementById('chatModeInput');
|
|||
|
|
if (chatModeInput) {
|
|||
|
|
// 触发重新渲染
|
|||
|
|
chatModeInput.style.display = 'none';
|
|||
|
|
void chatModeInput.offsetHeight; // 强制重排
|
|||
|
|
chatModeInput.style.display = 'block';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果有视口处理器，也触发重新计算
|
|||
|
|
if (window.viewportHandler) {
|
|||
|
|
window.viewportHandler.forceRecalculate();
|
|||
|
|
}
|
|||
|
|
}, 50);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 高亮当前活动的聊天项
|
|||
|
|
function highlightActiveChatItem(chatId) {
|
|||
|
|
// 移除所有聊天项的active类
|
|||
|
|
document.querySelectorAll('.chat-history-item').forEach(item => {
|
|||
|
|
item.classList.remove('active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 添加active类到当前聊天项
|
|||
|
|
const activeItem = document.querySelector(`[data-chat-id="${chatId}"]`);
|
|||
|
|
if (activeItem) {
|
|||
|
|
activeItem.classList.add('active');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从本地存储加载聊天消息
|
|||
|
|
function loadLocalChatMessages(chatId) {
|
|||
|
|
// 从聊天管理器加载消息
|
|||
|
|
if (window.chatManager) {
|
|||
|
|
console.log(`[loadChatHistory] 从本地加载聊天: ${chatId}`);
|
|||
|
|
console.log(`[loadChatHistory] 当前chatManager.currentChatId: ${window.chatManager.currentChatId}`);
|
|||
|
|
|
|||
|
|
// 如果不是当前聊天，才需要切换
|
|||
|
|
if (window.chatManager.currentChatId !== chatId) {
|
|||
|
|
console.log(`[loadChatHistory] 切换到聊天: ${chatId}`);
|
|||
|
|
window.chatManager.switchToChat(chatId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const chat = window.chatManager.getChat(chatId);
|
|||
|
|
if (chat && chat.messages) {
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
chat.messages.forEach(message => {
|
|||
|
|
// 直接创建消息元素，不调用addMessage以避免重复保存
|
|||
|
|
const messageItem = document.createElement('div');
|
|||
|
|
messageItem.className = 'message-item mb-4';
|
|||
|
|
|
|||
|
|
const isUser = message.type === 'user';
|
|||
|
|
const messageTime = new Date(message.timestamp).toLocaleTimeString('zh-CN', {
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 渲染内容（支持Markdown）
|
|||
|
|
let renderedContent = message.content;
|
|||
|
|
if (window.markdownRenderer) {
|
|||
|
|
renderedContent = window.markdownRenderer.render(message.content);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isUser) {
|
|||
|
|
messageItem.innerHTML = `
|
|||
|
|
<div class="flex justify-end">
|
|||
|
|
<div class="message user-message px-4 py-3">
|
|||
|
|
<div class="text-sm text-gray-800 markdown-content">${renderedContent}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-xs text-gray-500 text-right mt-1">${messageTime}</div>
|
|||
|
|
`;
|
|||
|
|
} else {
|
|||
|
|
messageItem.innerHTML = `
|
|||
|
|
<div class="flex justify-start">
|
|||
|
|
<div class="message ai-message px-4 py-3">
|
|||
|
|
<div class="text-sm text-gray-800 markdown-content">${renderedContent}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-xs text-gray-500 mt-1">${messageTime}</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
chatMessages.appendChild(messageItem);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 滚动到底部
|
|||
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|||
|
|
|
|||
|
|
// 切换到聊天模式
|
|||
|
|
showChatContainer();
|
|||
|
|
|
|||
|
|
// 强制重新计算布局，确保对齐
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (window.viewportHandler) {
|
|||
|
|
window.viewportHandler.forceRecalculate();
|
|||
|
|
}
|
|||
|
|
}, 100);
|
|||
|
|
} else {
|
|||
|
|
// 即使没有消息也要切换到聊天模式
|
|||
|
|
showChatContainer();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 兼容旧的加载方式
|
|||
|
|
loadChatHistoryLegacy(chatId);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保留旧的加载方式作为后备
|
|||
|
|
function loadChatHistoryLegacy(chatId) {
|
|||
|
|
// 原来的loadChatHistory实现
|
|||
|
|
if (chatHistoryData.has(chatId)) {
|
|||
|
|
const messages = chatHistoryData.get(chatId);
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
|
|||
|
|
messages.forEach(message => {
|
|||
|
|
const messageItem = document.createElement('div');
|
|||
|
|
messageItem.className = 'message-item mb-4';
|
|||
|
|
|
|||
|
|
const isUser = message.type === 'user';
|
|||
|
|
const messageTime = new Date(message.timestamp).toLocaleTimeString('zh-CN', {
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (isUser) {
|
|||
|
|
messageItem.innerHTML = `
|
|||
|
|
<div class="flex justify-end">
|
|||
|
|
<div class="message user-message px-4 py-3">
|
|||
|
|
<p class="text-sm text-gray-800">${message.content}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-xs text-gray-500 text-right mt-1">${messageTime}</div>
|
|||
|
|
`;
|
|||
|
|
} else {
|
|||
|
|
messageItem.innerHTML = `
|
|||
|
|
<div class="flex justify-start">
|
|||
|
|
<div class="message ai-message px-4 py-3">
|
|||
|
|
<p class="text-sm text-gray-800">${message.content}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-xs text-gray-500 mt-1">${messageTime}</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
chatMessages.appendChild(messageItem);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|||
|
|
showChatContainer();
|
|||
|
|
|
|||
|
|
// 强制重新计算布局，确保对齐
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (window.viewportHandler) {
|
|||
|
|
window.viewportHandler.forceRecalculate();
|
|||
|
|
}
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 全局暴露必要的函数
|
|||
|
|
window.startNewChat = startNewChat;
|
|||
|
|
window.toggleDeepSearch = toggleDeepSearch;
|
|||
|
|
|
|||
|
|
/* ===== Apple风格背景动画 ===== */
|
|||
|
|
function initBackground() {
|
|||
|
|
const gradientElement = document.getElementById('animatedGradient');
|
|||
|
|
if (!gradientElement) return;
|
|||
|
|
|
|||
|
|
let time = 0;
|
|||
|
|
|
|||
|
|
const animateGradient = () => {
|
|||
|
|
// 如果背景动画被暂停，延迟检查是否恢复
|
|||
|
|
if (window.pauseBackgroundAnimation) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
requestAnimationFrame(animateGradient);
|
|||
|
|
}, 1000); // 每秒检查一次
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
time += 0.0056; // 减慢动画速度让过渡更平滑
|
|||
|
|
|
|||
|
|
// 柔和、低饱和度的冷色调，包含近白色
|
|||
|
|
const colors = [
|
|||
|
|
{ r: 180, g: 205, b: 215, a: 0.5 }, // 柔和蓝
|
|||
|
|
{ r: 160, g: 195, b: 220, a: 0.4 }, // 柔和天蓝
|
|||
|
|
{ r: 160, g: 220, b: 200, a: 0.35 }, // 柔和海蓝
|
|||
|
|
{ r: 240, g: 248, b: 255, a: 0.6 }, // 爱丽丝蓝 (近白)
|
|||
|
|
{ r: 210, g: 210, b: 230, a: 0.3 }, // 柔和薰衣草
|
|||
|
|
{ r: 190, g: 140, b: 200, a: 0.25 } // 柔和紫
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 平滑的颜色插值函数
|
|||
|
|
const lerpColor = (color1, color2, t) => ({
|
|||
|
|
r: Math.round(color1.r + (color2.r - color1.r) * t),
|
|||
|
|
g: Math.round(color1.g + (color2.g - color1.g) * t),
|
|||
|
|
b: Math.round(color1.b + (color2.b - color1.b) * t),
|
|||
|
|
a: color1.a + (color2.a - color1.a) * t
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 为每个渐变创建平滑的颜色变化
|
|||
|
|
const getInterpolatedColor = (colorIndex, speed) => {
|
|||
|
|
const totalColors = colors.length;
|
|||
|
|
const colorPhase = (time * speed) % totalColors;
|
|||
|
|
const currentIndex = Math.floor(colorPhase) % totalColors;
|
|||
|
|
const nextIndex = (currentIndex + 1) % totalColors;
|
|||
|
|
const t = colorPhase - Math.floor(colorPhase);
|
|||
|
|
|
|||
|
|
return lerpColor(colors[currentIndex], colors[nextIndex], t);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 创建多个动画渐变，使用平滑的三角函数
|
|||
|
|
const gradient1Size = 60 + Math.sin(time * 0.8) * 20;
|
|||
|
|
const gradient2Size = 50 + Math.cos(time * 1.1) * 15;
|
|||
|
|
const gradient3Size = 70 + Math.sin(time * 0.6) * 25;
|
|||
|
|
const gradient4Size = 45 + Math.cos(time * 1.3) * 18;
|
|||
|
|
|
|||
|
|
// 更平滑的位置变化
|
|||
|
|
const gradient1X = 30 + Math.sin(time * 0.3) * 25;
|
|||
|
|
const gradient1Y = 40 + Math.cos(time * 0.4) * 20;
|
|||
|
|
|
|||
|
|
const gradient2X = 70 + Math.cos(time * 0.35) * 30;
|
|||
|
|
const gradient2Y = 60 + Math.sin(time * 0.25) * 25;
|
|||
|
|
|
|||
|
|
const gradient3X = 20 + Math.sin(time * 0.45) * 35;
|
|||
|
|
const gradient3Y = 80 + Math.cos(time * 0.2) * 30;
|
|||
|
|
|
|||
|
|
const gradient4X = 80 + Math.cos(time * 0.5) * 25;
|
|||
|
|
const gradient4Y = 20 + Math.sin(time * 0.3) * 20;
|
|||
|
|
|
|||
|
|
// 使用插值后的颜色
|
|||
|
|
const color1 = getInterpolatedColor(0, 0.3);
|
|||
|
|
const color2 = getInterpolatedColor(1, 0.4);
|
|||
|
|
const color3 = getInterpolatedColor(2, 0.2);
|
|||
|
|
const color4 = getInterpolatedColor(3, 0.5);
|
|||
|
|
|
|||
|
|
// 添加额外的颜色点以增强流动感
|
|||
|
|
const gradient5Size = 55 + Math.sin(time * 0.9) * 18;
|
|||
|
|
const gradient6Size = 65 + Math.cos(time * 0.7) * 22;
|
|||
|
|
|
|||
|
|
const gradient5X = 50 + Math.cos(time * 0.4) * 20;
|
|||
|
|
const gradient5Y = 30 + Math.sin(time * 0.5) * 15;
|
|||
|
|
|
|||
|
|
const gradient6X = 40 + Math.sin(time * 0.6) * 28;
|
|||
|
|
const gradient6Y = 70 + Math.cos(time * 0.35) * 22;
|
|||
|
|
|
|||
|
|
const color5 = getInterpolatedColor(4, 0.35);
|
|||
|
|
const color6 = getInterpolatedColor(5, 0.45);
|
|||
|
|
|
|||
|
|
const backgroundStyle = `
|
|||
|
|
radial-gradient(${gradient1Size}% ${gradient1Size}% at ${gradient1X}% ${gradient1Y}%,
|
|||
|
|
rgba(${color1.r}, ${color1.g}, ${color1.b}, ${color1.a}) 0%,
|
|||
|
|
transparent 60%),
|
|||
|
|
radial-gradient(${gradient2Size}% ${gradient2Size}% at ${gradient2X}% ${gradient2Y}%,
|
|||
|
|
rgba(${color2.r}, ${color2.g}, ${color2.b}, ${color2.a}) 0%,
|
|||
|
|
transparent 65%),
|
|||
|
|
radial-gradient(${gradient3Size}% ${gradient3Size}% at ${gradient3X}% ${gradient3Y}%,
|
|||
|
|
rgba(${color3.r}, ${color3.g}, ${color3.b}, ${color3.a}) 0%,
|
|||
|
|
transparent 70%),
|
|||
|
|
radial-gradient(${gradient4Size}% ${gradient4Size}% at ${gradient4X}% ${gradient4Y}%,
|
|||
|
|
rgba(${color4.r}, ${color4.g}, ${color4.b}, ${color4.a}) 0%,
|
|||
|
|
transparent 55%),
|
|||
|
|
radial-gradient(${gradient5Size}% ${gradient5Size}% at ${gradient5X}% ${gradient5Y}%,
|
|||
|
|
rgba(${color5.r}, ${color5.g}, ${color5.b}, ${color5.a}) 0%,
|
|||
|
|
transparent 75%),
|
|||
|
|
radial-gradient(${gradient6Size}% ${gradient6Size}% at ${gradient6X}% ${gradient6Y}%,
|
|||
|
|
rgba(${color6.r}, ${color6.g}, ${color6.b}, ${color6.a}) 0%,
|
|||
|
|
transparent 68%),
|
|||
|
|
linear-gradient(135deg,
|
|||
|
|
rgba(248, 250, 252, 0.9) 0%,
|
|||
|
|
rgba(241, 245, 249, 0.8) 50%,
|
|||
|
|
rgba(226, 232, 240, 0.9) 100%)
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
gradientElement.style.background = backgroundStyle;
|
|||
|
|
requestAnimationFrame(animateGradient);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
requestAnimationFrame(animateGradient);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ===== 初始化工具下拉菜单 =====
|
|||
|
|
function initToolsDropdown() {
|
|||
|
|
// 存储状态
|
|||
|
|
let isDeepResearchEnabled = false;
|
|||
|
|
let isShowThinkingEnabled = false;
|
|||
|
|
|
|||
|
|
// 欢迎模式的工具按钮和下拉菜单
|
|||
|
|
const toolsMenuBtn = document.getElementById('toolsMenuBtn');
|
|||
|
|
const toolsDropdown = document.getElementById('toolsDropdown');
|
|||
|
|
const deepResearchItem = document.getElementById('deepResearchItem');
|
|||
|
|
const showThinkingItem = document.getElementById('showThinkingItem');
|
|||
|
|
const deepResearchStatus = document.getElementById('deepResearchStatus');
|
|||
|
|
const showThinkingStatus = document.getElementById('showThinkingStatus');
|
|||
|
|
|
|||
|
|
// 聊天模式的工具按钮和下拉菜单
|
|||
|
|
const chatModeToolsMenuBtn = document.getElementById('chatModeToolsMenuBtn');
|
|||
|
|
const chatModeToolsDropdown = document.getElementById('chatModeToolsDropdown');
|
|||
|
|
const chatModeDeepResearchItem = document.getElementById('chatModeDeepResearchItem');
|
|||
|
|
const chatModeShowThinkingItem = document.getElementById('chatModeShowThinkingItem');
|
|||
|
|
const chatModeDeepResearchStatus = document.getElementById('chatModeDeepResearchStatus');
|
|||
|
|
const chatModeShowThinkingStatus = document.getElementById('chatModeShowThinkingStatus');
|
|||
|
|
|
|||
|
|
// 点击按钮显示/隐藏下拉菜单
|
|||
|
|
if (toolsMenuBtn && toolsDropdown) {
|
|||
|
|
toolsMenuBtn.addEventListener('click', function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const isShowing = toolsDropdown.classList.contains('show');
|
|||
|
|
|
|||
|
|
if (isShowing) {
|
|||
|
|
toolsDropdown.classList.remove('show');
|
|||
|
|
toolsMenuBtn.classList.remove('active');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toolsDropdown.style.display = 'none';
|
|||
|
|
}, 200);
|
|||
|
|
} else {
|
|||
|
|
toolsDropdown.style.display = 'block';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toolsDropdown.classList.add('show');
|
|||
|
|
toolsMenuBtn.classList.add('active');
|
|||
|
|
}, 10);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 聊天模式工具按钮
|
|||
|
|
if (chatModeToolsMenuBtn && chatModeToolsDropdown) {
|
|||
|
|
chatModeToolsMenuBtn.addEventListener('click', function(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const isShowing = chatModeToolsDropdown.classList.contains('show');
|
|||
|
|
|
|||
|
|
if (isShowing) {
|
|||
|
|
chatModeToolsDropdown.classList.remove('show');
|
|||
|
|
chatModeToolsMenuBtn.classList.remove('active');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
chatModeToolsDropdown.style.display = 'none';
|
|||
|
|
}, 200);
|
|||
|
|
} else {
|
|||
|
|
chatModeToolsDropdown.style.display = 'block';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
chatModeToolsDropdown.classList.add('show');
|
|||
|
|
chatModeToolsMenuBtn.classList.add('active');
|
|||
|
|
}, 10);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点击概念感知模式
|
|||
|
|
let isDeepResearchToggling = false; // 防止重复触发
|
|||
|
|
function toggleDeepResearch(e) {
|
|||
|
|
// 如果事件存在，阻止冒泡
|
|||
|
|
if (e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 防止重复触发
|
|||
|
|
if (isDeepResearchToggling) return;
|
|||
|
|
isDeepResearchToggling = true;
|
|||
|
|
|
|||
|
|
isDeepResearchEnabled = !isDeepResearchEnabled;
|
|||
|
|
|
|||
|
|
// 更新状态文字
|
|||
|
|
if (deepResearchStatus) {
|
|||
|
|
deepResearchStatus.textContent = isDeepResearchEnabled ? '开' : '关';
|
|||
|
|
deepResearchStatus.style.color = isDeepResearchEnabled ? '#2563eb' : '#666';
|
|||
|
|
}
|
|||
|
|
if (chatModeDeepResearchStatus) {
|
|||
|
|
chatModeDeepResearchStatus.textContent = isDeepResearchEnabled ? '开' : '关';
|
|||
|
|
chatModeDeepResearchStatus.style.color = isDeepResearchEnabled ? '#2563eb' : '#666';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新菜单项样式
|
|||
|
|
if (isDeepResearchEnabled) {
|
|||
|
|
if (deepResearchItem) deepResearchItem.classList.add('active');
|
|||
|
|
if (chatModeDeepResearchItem) chatModeDeepResearchItem.classList.add('active');
|
|||
|
|
} else {
|
|||
|
|
if (deepResearchItem) deepResearchItem.classList.remove('active');
|
|||
|
|
if (chatModeDeepResearchItem) chatModeDeepResearchItem.classList.remove('active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 同步更新两个开关的状态
|
|||
|
|
const deepResearchToggle = document.getElementById('deepResearchToggle');
|
|||
|
|
const chatModeDeepResearchToggle = document.getElementById('chatModeDeepResearchToggle');
|
|||
|
|
|
|||
|
|
if (deepResearchToggle && deepResearchToggle.checked !== isDeepResearchEnabled) {
|
|||
|
|
deepResearchToggle.checked = isDeepResearchEnabled;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (chatModeDeepResearchToggle && chatModeDeepResearchToggle.checked !== isDeepResearchEnabled) {
|
|||
|
|
chatModeDeepResearchToggle.checked = isDeepResearchEnabled;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('概念感知模式:', isDeepResearchEnabled ? '开启' : '关闭');
|
|||
|
|
|
|||
|
|
// 延迟重置标志
|
|||
|
|
setTimeout(() => {
|
|||
|
|
isDeepResearchToggling = false;
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点击显示思考
|
|||
|
|
let isShowThinkingToggling = false; // 防止重复触发
|
|||
|
|
function toggleShowThinking(e) {
|
|||
|
|
// 如果事件存在，阻止冒泡
|
|||
|
|
if (e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 防止重复触发
|
|||
|
|
if (isShowThinkingToggling) return;
|
|||
|
|
isShowThinkingToggling = true;
|
|||
|
|
|
|||
|
|
isShowThinkingEnabled = !isShowThinkingEnabled;
|
|||
|
|
|
|||
|
|
// 更新状态文字
|
|||
|
|
if (showThinkingStatus) {
|
|||
|
|
showThinkingStatus.textContent = isShowThinkingEnabled ? '开' : '关';
|
|||
|
|
showThinkingStatus.style.color = isShowThinkingEnabled ? '#2563eb' : '#666';
|
|||
|
|
}
|
|||
|
|
if (chatModeShowThinkingStatus) {
|
|||
|
|
chatModeShowThinkingStatus.textContent = isShowThinkingEnabled ? '开' : '关';
|
|||
|
|
chatModeShowThinkingStatus.style.color = isShowThinkingEnabled ? '#2563eb' : '#666';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新菜单项样式
|
|||
|
|
if (isShowThinkingEnabled) {
|
|||
|
|
if (showThinkingItem) showThinkingItem.classList.add('active');
|
|||
|
|
if (chatModeShowThinkingItem) chatModeShowThinkingItem.classList.add('active');
|
|||
|
|
} else {
|
|||
|
|
if (showThinkingItem) showThinkingItem.classList.remove('active');
|
|||
|
|
if (chatModeShowThinkingItem) chatModeShowThinkingItem.classList.remove('active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('显示思考:', isShowThinkingEnabled ? '开启' : '关闭');
|
|||
|
|
|
|||
|
|
// 延迟重置标志
|
|||
|
|
setTimeout(() => {
|
|||
|
|
isShowThinkingToggling = false;
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 绑定点击事件 - 只绑定到开关本身，避免重复触发
|
|||
|
|
const deepResearchToggle = document.getElementById('deepResearchToggle');
|
|||
|
|
const showThinkingToggle = document.getElementById('showThinkingToggle');
|
|||
|
|
const chatModeDeepResearchToggle = document.getElementById('chatModeDeepResearchToggle');
|
|||
|
|
const chatModeShowThinkingToggle = document.getElementById('chatModeShowThinkingToggle');
|
|||
|
|
|
|||
|
|
if (deepResearchToggle) {
|
|||
|
|
deepResearchToggle.addEventListener('change', function(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
toggleDeepResearch();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (showThinkingToggle) {
|
|||
|
|
showThinkingToggle.addEventListener('change', function(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
toggleShowThinking();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (chatModeDeepResearchToggle) {
|
|||
|
|
chatModeDeepResearchToggle.addEventListener('change', function(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
toggleDeepResearch();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (chatModeShowThinkingToggle) {
|
|||
|
|
chatModeShowThinkingToggle.addEventListener('change', function(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
toggleShowThinking();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点击其他地方关闭下拉菜单
|
|||
|
|
document.addEventListener('click', function(e) {
|
|||
|
|
if (toolsDropdown && !toolsMenuBtn.contains(e.target) && !toolsDropdown.contains(e.target)) {
|
|||
|
|
toolsDropdown.classList.remove('show');
|
|||
|
|
toolsMenuBtn.classList.remove('active');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toolsDropdown.style.display = 'none';
|
|||
|
|
}, 200);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (chatModeToolsDropdown && !chatModeToolsMenuBtn.contains(e.target) && !chatModeToolsDropdown.contains(e.target)) {
|
|||
|
|
chatModeToolsDropdown.classList.remove('show');
|
|||
|
|
chatModeToolsMenuBtn.classList.remove('active');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
chatModeToolsDropdown.style.display = 'none';
|
|||
|
|
}, 200);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 导出获取状态的方法
|
|||
|
|
window.getToolsSettings = function() {
|
|||
|
|
return {
|
|||
|
|
deepResearch: isDeepResearchEnabled,
|
|||
|
|
showThinking: isShowThinkingEnabled
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
}
|