Merge remote-tracking branch 'origin/main'

2025-09-12 13:15:03 +08:00
parent f0f57fec7d bbc7abd69c
commit e340bf3b34
28 changed files with 10237 additions and 1945 deletions
--- a/website/js/main.js
+++ b/website/js/main.js
@@ -16,6 +16,20 @@ document.addEventListener('DOMContentLoaded', function() {
    initModalEffects();
    initSmoothScrolling();
    initPreloader();
+    initCaseFiltering();
+    initNewsFiltering();
+    initPageTransitions();
+    enhanceCardHoverEffects();
+    enhanceButtonEffects();
+    initImageZoom();
+    enhanceBackToTop();
+    enhanceFormInteractions();
+    enhanceNavbar();
+    enhanceCarousel(); // 增强轮播图效果
+    enhanceModals(); // 增强模态框效果
+    initSocialShare(); // 社交分享功能
+    enhanceStatsDisplay(); // 增强统计数据展示
+    initScrollProgress(); // 页面滚动进度指示器
    
    console.log('官网初始化完成 - 活牛采购智能数字化系统');
 });
@@ -703,4 +717,416 @@ function initParticleEffect() {
    }
    
    animate();
-}
+}
+
+// 案例筛选功能
+function initCaseFiltering() {
+    const filterButtons = document.querySelectorAll('[data-filter]');
+    const caseItems = document.querySelectorAll('.case-grid .col-md-6');
+    
+    if (!filterButtons.length || !caseItems.length) return;
+    
+    filterButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const filterValue = this.getAttribute('data-filter');
+            
+            // 更新激活状态
+            filterButtons.forEach(btn => btn.classList.remove('active'));
+            this.classList.add('active');
+            
+            // 筛选案例
+            caseItems.forEach(item => {
+                if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
+                    item.style.display = 'block';
+                    setTimeout(() => {
+                        item.classList.add('fade-in-up');
+                    }, 100);
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+        });
+    });
+}
+
+// 新闻筛选功能
+function initNewsFiltering() {
+    const filterButtons = document.querySelectorAll('[data-filter]');
+    const newsItems = document.querySelectorAll('#news-list .col-12');
+    const searchInput = document.getElementById('newsSearch');
+    const searchBtn = document.getElementById('searchBtn');
+    
+    if (!filterButtons.length || !newsItems.length) return;
+    
+    // 筛选功能
+    filterButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const filterValue = this.getAttribute('data-filter');
+            
+            // 更新激活状态
+            filterButtons.forEach(btn => btn.classList.remove('active'));
+            this.classList.add('active');
+            
+            // 筛选新闻
+            newsItems.forEach(item => {
+                if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
+                    item.style.display = 'block';
+                    setTimeout(() => {
+                        item.classList.add('fade-in-up');
+                    }, 100);
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+        });
+    });
+    
+    // 搜索功能
+    if (searchInput && searchBtn) {
+        const performSearch = function() {
+            const searchTerm = searchInput.value.toLowerCase().trim();
+            
+            newsItems.forEach(item => {
+                const title = item.querySelector('.card-title').textContent.toLowerCase();
+                const content = item.querySelector('.card-text').textContent.toLowerCase();
+                
+                if (searchTerm === '' || title.includes(searchTerm) || content.includes(searchTerm)) {
+                    item.style.display = 'block';
+                    setTimeout(() => {
+                        item.classList.add('fade-in-up');
+                    }, 100);
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+        };
+        
+        searchBtn.addEventListener('click', performSearch);
+        searchInput.addEventListener('keyup', function(e) {
+            if (e.key === 'Enter') {
+                performSearch();
+            }
+        });
+    }
+}
+
+// 页面过渡动画
+function initPageTransitions() {
+    // 为所有内部链接添加页面切换效果
+    const links = document.querySelectorAll('a[href^="/"]:not([target])');
+    
+    links.forEach(link => {
+        link.addEventListener('click', function(e) {
+            const href = this.getAttribute('href');
+            
+            // 如果是锚点链接或外部链接，不使用过渡效果
+            if (href.startsWith('#') || href.includes('://')) return;
+            
+            e.preventDefault();
+            
+            // 添加过渡类
+            document.body.classList.add('page-transition');
+            
+            // 延迟跳转以显示过渡效果
+            setTimeout(() => {
+                window.location.href = href;
+            }, 300);
+        });
+    });
+    
+    // 页面加载完成后移除过渡类
+    window.addEventListener('pageshow', function() {
+        document.body.classList.remove('page-transition');
+    });
+}
+
+// 增强卡片悬停效果
+function enhanceCardHoverEffects() {
+    const cards = document.querySelectorAll('.card');
+    
+    cards.forEach(card => {
+        // 添加3D变换效果
+        card.addEventListener('mousemove', function(e) {
+            const rect = card.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            
+            const rotateY = (x - centerX) / 10;
+            const rotateX = (centerY - y) / 10;
+            
+            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
+        });
+    });
+}
+
+// 增强按钮点击效果
+function enhanceButtonEffects() {
+    const buttons = document.querySelectorAll('.btn');
+    
+    buttons.forEach(button => {
+        button.addEventListener('mousedown', function() {
+            this.classList.add('btn-pressed');
+        });
+        
+        button.addEventListener('mouseup', function() {
+            this.classList.remove('btn-pressed');
+        });
+        
+        button.addEventListener('mouseleave', function() {
+            this.classList.remove('btn-pressed');
+        });
+    });
+}
+
+// 图片放大效果
+function initImageZoom() {
+    const images = document.querySelectorAll('.card-img-top');
+    
+    images.forEach(img => {
+        img.addEventListener('mouseenter', function() {
+            this.style.transform = 'scale(1.05)';
+        });
+        
+        img.addEventListener('mouseleave', function() {
+            this.style.transform = 'scale(1)';
+        });
+    });
+}
+
+// 增强返回顶部按钮效果
+function enhanceBackToTop() {
+    const backToTopBtn = document.querySelector('.back-to-top');
+    
+    if (backToTopBtn) {
+        // 添加脉冲动画
+        setInterval(() => {
+            backToTopBtn.classList.toggle('pulse');
+        }, 2000);
+        
+        // 滚动进度指示
+        window.addEventListener('scroll', function() {
+            const scrollTop = window.scrollY;
+            const docHeight = document.body.scrollHeight - window.innerHeight;
+            const scrollPercent = (scrollTop / docHeight) * 100;
+            
+            // 可以在这里添加进度指示器
+        });
+    }
+}
+
+// 增强表单交互效果
+function enhanceFormInteractions() {
+    const formControls = document.querySelectorAll('.form-control, .form-select');
+    
+    formControls.forEach(control => {
+        control.addEventListener('focus', function() {
+            this.parentElement.classList.add('focused');
+        });
+        
+        control.addEventListener('blur', function() {
+            this.parentElement.classList.remove('focused');
+        });
+        
+        // 添加输入效果
+        control.addEventListener('input', function() {
+            if (this.value.length > 0) {
+                this.classList.add('has-value');
+            } else {
+                this.classList.remove('has-value');
+            }
+        });
+    });
+}
+
+// 增强导航栏效果
+function enhanceNavbar() {
+    const navbar = document.querySelector('.navbar');
+    const navLinks = document.querySelectorAll('.nav-link');
+    
+    // 添加导航栏品牌动画
+    const brand = document.querySelector('.navbar-brand');
+    if (brand) {
+        brand.addEventListener('mouseenter', function() {
+            this.style.transform = 'scale(1.05)';
+        });
+        
+        brand.addEventListener('mouseleave', function() {
+            this.style.transform = 'scale(1)';
+        });
+    }
+    
+    // 增强导航链接效果
+    navLinks.forEach(link => {
+        link.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-2px)';
+        });
+        
+        link.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+        });
+    });
+}
+
+// 增强轮播图效果
+function enhanceCarousel() {
+    const carousels = document.querySelectorAll('.carousel');
+    
+    carousels.forEach(carousel => {
+        const carouselElement = new bootstrap.Carousel(carousel, {
+            interval: 5000,
+            pause: 'hover',
+            wrap: true
+        });
+        
+        // 添加手动控制增强
+        const indicators = carousel.querySelectorAll('.carousel-indicators button');
+        const controls = carousel.querySelectorAll('.carousel-control-prev, .carousel-control-next');
+        
+        // 指示器悬停效果
+        indicators.forEach((indicator, index) => {
+            indicator.addEventListener('mouseenter', function() {
+                this.style.transform = 'scale(1.2)';
+            });
+            
+            indicator.addEventListener('mouseleave', function() {
+                this.style.transform = 'scale(1)';
+            });
+        });
+        
+        // 控制按钮效果
+        controls.forEach(control => {
+            control.addEventListener('mouseenter', function() {
+                this.style.transform = 'scale(1.1)';
+            });
+            
+            control.addEventListener('mouseleave', function() {
+                this.style.transform = 'scale(1)';
+            });
+        });
+    });
+}
+
+// 增强模态框效果
+function enhanceModals() {
+    const modals = document.querySelectorAll('.modal');
+    
+    modals.forEach(modal => {
+        modal.addEventListener('show.bs.modal', function() {
+            // 添加背景模糊效果
+            document.body.classList.add('modal-open-blur');
+            
+            // 增强模态框动画
+            this.querySelector('.modal-dialog').style.transform = 'scale(0.8) translateY(-50px)';
+            this.querySelector('.modal-dialog').style.opacity = '0';
+            
+            setTimeout(() => {
+                this.querySelector('.modal-dialog').style.transition = 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)';
+                this.querySelector('.modal-dialog').style.transform = 'scale(1) translateY(0)';
+                this.querySelector('.modal-dialog').style.opacity = '1';
+            }, 50);
+        });
+        
+        modal.addEventListener('hide.bs.modal', function() {
+            // 移除背景模糊效果
+            document.body.classList.remove('modal-open-blur');
+            
+            this.querySelector('.modal-dialog').style.transform = 'scale(0.8) translateY(-50px)';
+            this.querySelector('.modal-dialog').style.opacity = '0';
+        });
+    });
+}
+
+// 添加社交分享功能
+function initSocialShare() {
+    const shareButtons = document.querySelectorAll('.social-share');
+    
+    if (shareButtons.length > 0) {
+        shareButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                const url = window.location.href;
+                const title = document.title;
+                
+                if (navigator.share) {
+                    // 使用原生分享API
+                    navigator.share({
+                        title: title,
+                        url: url
+                    }).catch(console.error);
+                } else {
+                    // 降级处理：复制链接
+                    const textarea = document.createElement('textarea');
+                    textarea.value = url;
+                    document.body.appendChild(textarea);
+                    textarea.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(textarea);
+                    
+                    // 显示提示
+                    showAlert('info', '链接已复制到剪贴板');
+                }
+            });
+        });
+    }
+}
+
+// 增强统计数据展示
+function enhanceStatsDisplay() {
+    const statItems = document.querySelectorAll('.stat-item, .stat-number');
+    
+    statItems.forEach(item => {
+        item.addEventListener('mouseenter', function() {
+            this.style.transform = 'scale(1.05)';
+        });
+        
+        item.addEventListener('mouseleave', function() {
+            this.style.transform = 'scale(1)';
+        });
+    });
+}
+
+// 添加页面滚动进度指示器
+function initScrollProgress() {
+    // 创建进度条元素
+    const progressBar = document.createElement('div');
+    progressBar.className = 'scroll-progress';
+    progressBar.innerHTML = '<div class="scroll-progress-bar"></div>';
+    document.body.appendChild(progressBar);
+    
+    // 添加样式
+    const style = document.createElement('style');
+    style.textContent = `
+        .scroll-progress {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background: rgba(0, 0, 0, 0.1);
+            z-index: 9999;
+        }
+        
+        .scroll-progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+    `;
+    document.head.appendChild(style);
+    
+    // 监听滚动事件
+    window.addEventListener('scroll', function() {
+        const scrollTop = window.scrollY;
+        const docHeight = document.body.scrollHeight - window.innerHeight;
+        const scrollPercent = (scrollTop / docHeight) * 100;
+        
+        progressBar.querySelector('.scroll-progress-bar').style.width = scrollPercent + '%';
+    });
+}