feat: 完成化工订单班半导体AI检测项目展示页面
详细说明: - 创建化工订单班(chemical)展示页面完整结构 - 实现300mm硅晶圆+SiO₂薄膜AI综合检测项目展示 - 使用紫色/紫罗兰科技主题(#7c3aed, #8b5cf6)突出半导体专业特色 - 深色主题采用深邃紫黑色(#0f0a1f)营造科技氛围 核心功能: - 4个展示区块:项目概述、判定标准、检测流程、检测结果 - 4个Agent角色展示:项目经理、质量工程师、AI系统工程师、数据分析师 - 智能数据动画:单片用时6分钟、批次1.5小时、AI可信度94%、合格率95% - 8张专业图片:检测背景、硅晶圆项目、光学检测、热力图等 - 深浅主题切换、平滑滚动、懒加载等交互功能 技术特性: - 玻璃态设计(glassmorphism)配合backdrop-filter - 视差滚动效果(background-attachment: fixed) - Intersection Observer实现动画和懒加载 - LocalStorage持久化主题偏好 - 响应式网格布局适配多屏幕 修复问题: - Agent头像映射:使用现有3个头像文件适配4个角色 - 图片文件名编码:修复全角/半角括号差异(使用sed命令) 文件清单: - web_frontend/web_result/order-classes/chemical/index.html (641行) - web_frontend/web_result/order-classes/chemical/css/styles.css (961行) - web_frontend/web_result/order-classes/chemical/js/main.js (266行) - 软链接:agent-avatars → data/订单班文档资料/化工/agent头像 - 软链接:images → data/订单班文档资料/化工/notion文稿/image 项目数据: - 检测对象:300mm P型硅晶圆20片 - 检测项目:外观(颗粒/划痕/腐蚀)、薄膜(厚度/均匀性)、电学(Rs)、成分(XPS) - 批次结果:19片合格、1片观察、0片不合格 - AI判定规则:≥0.90合格、0.80-0.90观察、<0.80待复核 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
266
web_frontend/web_result/order-classes/chemical/js/main.js
Normal file
266
web_frontend/web_result/order-classes/chemical/js/main.js
Normal file
@@ -0,0 +1,266 @@
|
||||
// 半导体AI综合检测项目 - 主要JavaScript逻辑
|
||||
|
||||
// 页面初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('🔬 化工订单班半导体检测页面加载完成');
|
||||
|
||||
// 初始化Lucide图标
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// 初始化组件
|
||||
initNavigation();
|
||||
initAnimations();
|
||||
initLazyLoading();
|
||||
initSmoothScroll();
|
||||
updateStats();
|
||||
initThemeToggle();
|
||||
});
|
||||
|
||||
// 导航功能
|
||||
function initNavigation() {
|
||||
const navItems = document.querySelectorAll('.nav-item');
|
||||
const sections = document.querySelectorAll('.section');
|
||||
|
||||
// 点击导航项滚动到对应区块
|
||||
navItems.forEach((item, index) => {
|
||||
item.addEventListener('click', () => {
|
||||
// 移除所有活跃状态
|
||||
navItems.forEach(nav => nav.classList.remove('active'));
|
||||
// 添加当前活跃状态
|
||||
item.classList.add('active');
|
||||
|
||||
// 滚动到对应区块
|
||||
if (sections[index]) {
|
||||
const targetSection = sections[index];
|
||||
const offsetTop = targetSection.offsetTop - 100;
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 滚动时更新导航活跃状态
|
||||
window.addEventListener('scroll', () => {
|
||||
let current = '';
|
||||
sections.forEach((section, index) => {
|
||||
const sectionTop = section.offsetTop - 150;
|
||||
if (scrollY >= sectionTop) {
|
||||
current = index;
|
||||
}
|
||||
});
|
||||
|
||||
navItems.forEach((item, index) => {
|
||||
item.classList.remove('active');
|
||||
if (index === current) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 动画初始化
|
||||
function initAnimations() {
|
||||
// 使用 Intersection Observer 实现滚动动画
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('fade-in');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察所有需要动画的元素
|
||||
const animatedElements = document.querySelectorAll('.card, .expert-intro');
|
||||
animatedElements.forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// 图片懒加载
|
||||
function initLazyLoading() {
|
||||
const images = document.querySelectorAll('img[data-src]');
|
||||
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
const src = img.getAttribute('data-src');
|
||||
|
||||
// 创建新图片对象来预加载
|
||||
const tempImg = new Image();
|
||||
tempImg.onload = function() {
|
||||
img.src = src;
|
||||
img.classList.add('loaded');
|
||||
};
|
||||
tempImg.onerror = function() {
|
||||
// 如果图片加载失败，使用紫色主题占位图
|
||||
img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f5f3ff"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%237c3aed"%3E图片加载中%3C/text%3E%3C/svg%3E';
|
||||
img.classList.add('error');
|
||||
};
|
||||
tempImg.src = src;
|
||||
|
||||
img.removeAttribute('data-src');
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach(img => {
|
||||
imageObserver.observe(img);
|
||||
});
|
||||
}
|
||||
|
||||
// 平滑滚动
|
||||
function initSmoothScroll() {
|
||||
// 为所有锚点链接添加平滑滚动
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const target = document.querySelector(targetId);
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 更新统计数据 - 半导体检测数据
|
||||
function updateStats() {
|
||||
// 动画数字增长效果 - 半导体AI检测相关数据
|
||||
const stats = [
|
||||
{ selector: '.single-time', value: 6, suffix: '分钟' },
|
||||
{ selector: '.batch-time', value: 1.5, suffix: '小时' },
|
||||
{ selector: '.ai-confidence', value: 94, suffix: '%' },
|
||||
{ selector: '.pass-rate', value: 95, suffix: '%' }
|
||||
];
|
||||
|
||||
stats.forEach(stat => {
|
||||
const element = document.querySelector(stat.selector);
|
||||
if (element) {
|
||||
animateValue(element, 0, stat.value, 2000, stat.suffix);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 数字动画函数
|
||||
function animateValue(element, start, end, duration, suffix = '') {
|
||||
const startTime = performance.now();
|
||||
|
||||
function update(currentTime) {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
// 使用缓动函数
|
||||
const easeOutQuad = progress * (2 - progress);
|
||||
let current;
|
||||
|
||||
// 处理小数值（如1.5）
|
||||
if (end < 10 && end % 1 !== 0) {
|
||||
current = (start + (end - start) * easeOutQuad).toFixed(1);
|
||||
} else {
|
||||
current = Math.floor(start + (end - start) * easeOutQuad);
|
||||
}
|
||||
|
||||
element.textContent = current + suffix;
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
// 错误处理
|
||||
window.addEventListener('error', function(e) {
|
||||
if (e.target.tagName === 'IMG') {
|
||||
console.warn('图片加载失败:', e.target.src);
|
||||
e.target.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f5f3ff"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%237c3aed"%3E图片暂时无法显示%3C/text%3E%3C/svg%3E';
|
||||
e.target.classList.add('error');
|
||||
}
|
||||
}, true);
|
||||
|
||||
// 移动端优化
|
||||
if ('ontouchstart' in window) {
|
||||
document.body.classList.add('touch-device');
|
||||
|
||||
// 移动端点击优化
|
||||
let touchStartTime;
|
||||
document.addEventListener('touchstart', () => {
|
||||
touchStartTime = Date.now();
|
||||
});
|
||||
|
||||
document.addEventListener('touchend', (e) => {
|
||||
const touchEndTime = Date.now();
|
||||
if (touchEndTime - touchStartTime < 200) {
|
||||
// 快速点击
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 性能监控
|
||||
if (window.performance && window.performance.timing) {
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(() => {
|
||||
const timing = window.performance.timing;
|
||||
const loadTime = timing.loadEventEnd - timing.navigationStart;
|
||||
console.log(`页面加载时间: ${loadTime}ms`);
|
||||
|
||||
// 如果加载时间过长，提示用户
|
||||
if (loadTime > 3000) {
|
||||
console.warn('页面加载时间较长，可能需要优化');
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
|
||||
// 主题切换功能
|
||||
function initThemeToggle() {
|
||||
const themeToggleBtn = document.getElementById('themeToggleBtn');
|
||||
|
||||
// 从localStorage读取用户的主题偏好
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
// 如果没有保存的偏好，默认使用暗色主题
|
||||
if (savedTheme === 'dark' || savedTheme === null) {
|
||||
document.body.classList.add('dark-theme');
|
||||
}
|
||||
|
||||
// 点击切换主题
|
||||
if (themeToggleBtn) {
|
||||
themeToggleBtn.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark-theme');
|
||||
|
||||
// 保存用户偏好
|
||||
if (document.body.classList.contains('dark-theme')) {
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
|
||||
// 重新初始化图标以确保正确显示
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user