yanxulong/AIEC-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
闫旭隆
2025-10-17 09:31:28 +08:00
commit 4698145045
589 changed files with 196795 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

468
AIEC-server/js/chat-mode-optimizer.js Normal file
View File

@ -0,0 +1,468 @@
/**
* 聊天模式性能优化
* 在聊天模式下禁用轮播和动画以节省资源
*/
(function() {
'use strict';
let animationsPaused = false;
let carouselInterval = null;
let originalAnimations = new Map();
/**
* 暂停所有CSS动画
*/
function pauseCSSAnimations() {
// 获取所有有动画的元素
const animatedElements = document.querySelectorAll('*');
animatedElements.forEach(element => {
const computedStyle = window.getComputedStyle(element);
const animationName = computedStyle.animationName;
const animationDuration = computedStyle.animationDuration;
if (animationName && animationName !== 'none') {
// 保存原始动画设置
originalAnimations.set(element, {
animationName: animationName,
animationDuration: animationDuration,
animationPlayState: computedStyle.animationPlayState
});
// 暂停动画
element.style.animationPlayState = 'paused';
}
});
}
/**
* 恢复所有CSS动画
*/
function resumeCSSAnimations() {
originalAnimations.forEach((styles, element) => {
element.style.animationPlayState = styles.animationPlayState || 'running';
});
originalAnimations.clear();
}
/**
* 停止轮播
*/
function stopCarousel() {
// 停止ticker轮播
const tickerCarousel = document.getElementById('tickerCarousel');
if (tickerCarousel) {
tickerCarousel.style.animationPlayState = 'paused';
console.log('已暂停ticker轮播');
}
// 停止所有自定义轮播动画
const carouselElements = document.querySelectorAll('.ticker-carousel, .news-carousel');
carouselElements.forEach(el => {
el.style.animationPlayState = 'paused';
});
// 查找并停止所有轮播相关的定时器
if (window.tickerInterval) {
clearInterval(window.tickerInterval);
window.tickerInterval = null;
}
// 停止新闻轮播定时器
if (window.newsRotationInterval) {
clearInterval(window.newsRotationInterval);
window.newsRotationInterval = null;
console.log('已停止新闻轮播定时器');
}
// 保存所有活动的定时器ID以便恢复
window.pausedIntervals = [];
// 暴力停止所有定时器（作为后备方案）
const highestId = window.setTimeout(function() {
for (let i = highestId; i >= 0; i--) {
window.clearInterval(i);
}
}, 0);
// 停止Bootstrap轮播
const carousels = document.querySelectorAll('.carousel');
carousels.forEach(carousel => {
if (typeof $ !== 'undefined' && $(carousel).carousel) {
$(carousel).carousel('pause');
}
});
// 停止Swiper轮播
if (window.Swiper) {
const swipers = document.querySelectorAll('.swiper-container');
swipers.forEach(swiperEl => {
if (swiperEl.swiper) {
swiperEl.swiper.autoplay.stop();
}
});
}
}
/**
* 恢复轮播
*/
function startCarousel() {
// 恢复Bootstrap轮播
const carousels = document.querySelectorAll('.carousel');
carousels.forEach(carousel => {
if ($(carousel).carousel) {
$(carousel).carousel('cycle');
}
});
// 恢复Swiper轮播
if (window.Swiper) {
const swipers = document.querySelectorAll('.swiper-container');
swipers.forEach(swiperEl => {
if (swiperEl.swiper) {
swiperEl.swiper.autoplay.start();
}
});
}
}
/**
* 禁用背景视频
*/
function pauseBackgroundVideos() {
const videos = document.querySelectorAll('video');
videos.forEach(video => {
if (!video.paused) {
video.pause();
video.dataset.wasPaused = 'false';
} else {
video.dataset.wasPaused = 'true';
}
});
}
/**
* 恢复背景视频
*/
function resumeBackgroundVideos() {
const videos = document.querySelectorAll('video');
videos.forEach(video => {
if (video.dataset.wasPaused === 'false') {
video.play();
}
});
}
/**
* 进入聊天模式时的优化
*/
function optimizeForChatMode() {
if (animationsPaused) return;
console.log('进入聊天模式，暂停动画和轮播');
// 添加聊天模式激活类
document.body.classList.add('chat-mode-active');
// 冻结背景渐变但保持可见
const animatedGradient = document.querySelector('.animated-gradient');
if (animatedGradient) {
// 获取当前背景并冻结
const currentStyle = window.getComputedStyle(animatedGradient);
const currentBackground = currentStyle.backgroundImage || currentStyle.background;
// 保存原始样式
animatedGradient.dataset.originalBackground = animatedGradient.style.background;
animatedGradient.dataset.originalTransition = animatedGradient.style.transition;
// 设置固定背景
animatedGradient.style.background = currentBackground;
animatedGradient.style.transition = 'none';
// 停止requestAnimationFrame动画
// 设置标志位阻止动画继续
window.pauseBackgroundAnimation = true;
console.log('已冻结背景渐变动画，保持当前颜色');
}
// 暂停CSS动画但不包括背景和功能性元素
const animatedElements = document.querySelectorAll('[style*="animation"]');
animatedElements.forEach(el => {
// 不处理背景渐变、加载动画和工具按钮
if (!el.classList.contains('animated-gradient') &&
!el.classList.contains('loading-spinner') &&
el.id !== 'chatModeLoadingSpinner' &&
el.id !== 'loadingSpinner' &&
!el.closest('#toolsMenuBtn')) {
el.style.animationPlayState = 'paused';
}
});
// 停止轮播
stopCarousel();
// 暂停背景视频
pauseBackgroundVideos();
// 只隐藏3D动画元素
const tickerElements = document.querySelectorAll(
'.ticker-pulse-ring, .ticker-carousel, .news-carousel, .ticker-flip-card'
);
tickerElements.forEach(el => {
el.style.display = 'none';
});
// 隐藏整个ticker区域
const tickerSection = document.querySelector('.ticker-section');
if (tickerSection) {
tickerSection.style.display = 'none';
console.log('已隐藏3D ticker区域');
}
animationsPaused = true;
}
/**
* 退出聊天模式时恢复
*/
function restoreFromChatMode() {
if (!animationsPaused) return;
console.log('退出聊天模式，恢复动画和轮播');
// 移除聊天模式激活类
document.body.classList.remove('chat-mode-active');
// 恢复背景渐变动画
const animatedGradient = document.querySelector('.animated-gradient');
if (animatedGradient) {
// 恢复原始样式
animatedGradient.style.background = animatedGradient.dataset.originalBackground || '';
animatedGradient.style.transition = animatedGradient.dataset.originalTransition || '';
delete animatedGradient.dataset.originalBackground;
delete animatedGradient.dataset.originalTransition;
// 恢复背景动画
window.pauseBackgroundAnimation = false;
// 重新启动背景动画（如果有initBackground函数）
if (window.initBackground && typeof window.initBackground === 'function') {
window.initBackground();
}
console.log('已恢复背景渐变动画');
}
// 恢复CSS动画
const animatedElements = document.querySelectorAll('[style*="animation"]');
animatedElements.forEach(el => {
if (el.id !== 'chatModeLoadingSpinner' && el.id !== 'loadingSpinner') {
el.style.animationPlayState = '';
}
});
// 恢复轮播
startCarousel();
// 恢复背景视频
resumeBackgroundVideos();
// 恢复3D动画元素
const tickerElements = document.querySelectorAll(
'.ticker-pulse-ring, .ticker-carousel, .news-carousel, .ticker-flip-card'
);
tickerElements.forEach(el => {
el.style.display = '';
});
// 恢复ticker区域
const tickerSection = document.querySelector('.ticker-section');
if (tickerSection) {
tickerSection.style.display = '';
console.log('已恢复3D ticker区域');
}
// 重新启动新闻轮播
if (window.initTicker3D && typeof window.initTicker3D === 'function') {
window.initTicker3D();
}
animationsPaused = false;
}
/**
* 检测聊天模式状态
*/
function checkChatModeStatus() {
const chatContainer = document.getElementById('chatContainer');
const welcomeScreen = document.getElementById('welcomeScreen');
// 判断是否在聊天模式
const isInChatMode = chatContainer && chatContainer.style.display !== 'none' &&
(!welcomeScreen || welcomeScreen.style.display === 'none');
if (isInChatMode) {
optimizeForChatMode();
} else {
restoreFromChatMode();
}
}
/**
* 监听模式切换
*/
function setupModeObserver() {
// 监听聊天容器的显示状态变化
const chatContainer = document.getElementById('chatContainer');
const welcomeScreen = document.getElementById('welcomeScreen');
if (!chatContainer) {
setTimeout(setupModeObserver, 500);
return;
}
// 创建MutationObserver监听display变化
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes' &&
(mutation.attributeName === 'style' || mutation.attributeName === 'class')) {
checkChatModeStatus();
}
});
});
// 开始观察
if (chatContainer) {
observer.observe(chatContainer, {
attributes: true,
attributeFilter: ['style', 'class']
});
}
if (welcomeScreen) {
observer.observe(welcomeScreen, {
attributes: true,
attributeFilter: ['style', 'class']
});
}
// 初始检查
checkChatModeStatus();
}
/**
* 添加全局样式优化
*/
function addOptimizationStyles() {
const style = document.createElement('style');
style.id = 'chat-mode-optimization';
style.textContent = `
/* 保持背景但停止过渡动画 */
.chat-mode-active .animated-gradient {
transition: none !important;
}
/* 隐藏3D ticker区域 */
.chat-mode-active .ticker-section {
display: none !important;
}
/* 隐藏脉冲环动画 */
.chat-mode-active .ticker-pulse-ring {
display: none !important;
}
/* 隐藏3D卡片和轮播 */
.chat-mode-active .ticker-carousel,
.chat-mode-active .ticker-flip-card,
.chat-mode-active .news-carousel {
display: none !important;
}
/* 聊天模式下隐藏轮播控制器 */
.chat-mode-active .carousel-control-prev,
.chat-mode-active .carousel-control-next,
.chat-mode-active .carousel-indicators {
display: none !important;
}
/* 确保spin动画关键帧存在 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 保持加载动画正常运行 */
.chat-mode-active .loading-spinner,
.chat-mode-active #loadingSpinner,
.chat-mode-active #chatModeLoadingSpinner {
animation: spin 1s linear infinite !important;
animation-play-state: running !important;
}
/* 只停止装饰性动画，不影响功能性动画 */
.chat-mode-active .ticker-pulse-ring,
.chat-mode-active .wave-animation {
animation-play-state: paused !important;
}
/* 减少GPU使用 */
.chat-mode-active .ticker-3d,
.chat-mode-active .particles-js,
.chat-mode-active .wave-animation {
transform: none !important;
will-change: auto !important;
}
`;
document.head.appendChild(style);
}
/**
* 初始化
*/
function init() {
// 添加优化样式
addOptimizationStyles();
// DOM加载完成后设置监听
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupModeObserver);
} else {
setupModeObserver();
}
// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
// 页面不可见时暂停所有动画
optimizeForChatMode();
} else {
// 页面可见时根据模式恢复
checkChatModeStatus();
}
});
// 为body添加聊天模式类
const originalSendMessage = window.sendMessage;
if (originalSendMessage) {
window.sendMessage = function() {
document.body.classList.add('chat-mode-active');
return originalSendMessage.apply(this, arguments);
};
}
}
// 启动
init();
// 导出API供外部调用
window.chatModeOptimizer = {
pause: optimizeForChatMode,
resume: restoreFromChatMode,
check: checkChatModeStatus
};
})();