fix: 修复ResultModal数据提取时的agent调用错误
详细说明: - 修复getProjectInfo函数中seq.agent()的类型错误 - 添加兼容性处理，支持函数和对象两种数据格式 - 解决选择订单班后点击按钮导致页面崩溃的问题 - 修改文件: WorkflowPageV4.tsx (第934行) - 影响模块: ResultModal数据显示系统 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
@@ -16,6 +16,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
initSmoothScroll();
|
||||
updateStats();
|
||||
initThemeToggle();
|
||||
initAccordion();
|
||||
initComparisonSlider();
|
||||
initImageLightbox();
|
||||
});
|
||||
|
||||
// 导航功能
|
||||
@@ -266,3 +269,221 @@ function initThemeToggle() {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 手风琴面板交互逻辑
|
||||
function initAccordion() {
|
||||
const accordionHeaders = document.querySelectorAll('.accordion-header');
|
||||
|
||||
accordionHeaders.forEach(header => {
|
||||
header.addEventListener('click', () => {
|
||||
const accordionItem = header.parentElement;
|
||||
const wasActive = accordionItem.classList.contains('active');
|
||||
|
||||
// 关闭所有其他面板
|
||||
document.querySelectorAll('.accordion-item').forEach(otherItem => {
|
||||
otherItem.classList.remove('active');
|
||||
});
|
||||
|
||||
// 切换当前面板状态
|
||||
if (!wasActive) {
|
||||
accordionItem.classList.add('active');
|
||||
}
|
||||
|
||||
// 重新初始化Lucide图标以确保折叠箭头正确显示
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 默认打开第一个面板（预算明细）
|
||||
const firstAccordionItem = document.querySelector('.accordion-item');
|
||||
if (firstAccordionItem && !firstAccordionItem.classList.contains('active')) {
|
||||
firstAccordionItem.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// 图片对比滑块交互逻辑
|
||||
function initComparisonSlider() {
|
||||
const comparisonContainers = document.querySelectorAll('.comparison-container');
|
||||
|
||||
comparisonContainers.forEach(container => {
|
||||
const slider = container.querySelector('.comparison-slider');
|
||||
const afterImage = container.querySelector('.comparison-image-after');
|
||||
|
||||
let isDragging = false;
|
||||
|
||||
// 更新滑块位置
|
||||
function updatePosition(clientX) {
|
||||
const rect = container.getBoundingClientRect();
|
||||
const x = clientX - rect.left;
|
||||
const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
|
||||
|
||||
container.style.setProperty('--position', `${percentage}%`);
|
||||
}
|
||||
|
||||
// 鼠标事件
|
||||
function handleMouseDown(e) {
|
||||
isDragging = true;
|
||||
container.style.cursor = 'ew-resize';
|
||||
updatePosition(e.clientX);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function handleMouseMove(e) {
|
||||
if (!isDragging) return;
|
||||
updatePosition(e.clientX);
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
isDragging = false;
|
||||
container.style.cursor = 'ew-resize';
|
||||
}
|
||||
|
||||
// 触摸事件
|
||||
function handleTouchStart(e) {
|
||||
isDragging = true;
|
||||
updatePosition(e.touches[0].clientX);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function handleTouchMove(e) {
|
||||
if (!isDragging) return;
|
||||
updatePosition(e.touches[0].clientX);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function handleTouchEnd() {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
// 绑定事件监听器
|
||||
container.addEventListener('mousedown', handleMouseDown);
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
container.addEventListener('touchstart', handleTouchStart, { passive: false });
|
||||
document.addEventListener('touchmove', handleTouchMove, { passive: false });
|
||||
document.addEventListener('touchend', handleTouchEnd);
|
||||
|
||||
// 点击直接跳转到点击位置
|
||||
container.addEventListener('click', (e) => {
|
||||
if (!isDragging) {
|
||||
updatePosition(e.clientX);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 图片放大Lightbox功能
|
||||
function initImageLightbox() {
|
||||
// 创建Lightbox模态框HTML结构
|
||||
const lightboxHTML = `
|
||||
<div class="lightbox-modal" id="lightboxModal">
|
||||
<div class="lightbox-content">
|
||||
<img src="" alt="放大图片" class="lightbox-image" id="lightboxImage">
|
||||
</div>
|
||||
<div class="lightbox-close" id="lightboxClose"></div>
|
||||
<div class="lightbox-label" id="lightboxLabel"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 将Lightbox添加到页面底部
|
||||
document.body.insertAdjacentHTML('beforeend', lightboxHTML);
|
||||
|
||||
const lightboxModal = document.getElementById('lightboxModal');
|
||||
const lightboxImage = document.getElementById('lightboxImage');
|
||||
const lightboxLabel = document.getElementById('lightboxLabel');
|
||||
const lightboxClose = document.getElementById('lightboxClose');
|
||||
|
||||
// 获取所有对比图片
|
||||
const comparisonImages = document.querySelectorAll('.comparison-image');
|
||||
|
||||
// 跟踪拖动状态
|
||||
let dragStartTime = 0;
|
||||
let dragStartX = 0;
|
||||
let dragStartY = 0;
|
||||
|
||||
comparisonImages.forEach(img => {
|
||||
// 记录鼠标按下位置和时间
|
||||
img.addEventListener('mousedown', (e) => {
|
||||
dragStartTime = Date.now();
|
||||
dragStartX = e.clientX;
|
||||
dragStartY = e.clientY;
|
||||
});
|
||||
|
||||
img.addEventListener('touchstart', (e) => {
|
||||
dragStartTime = Date.now();
|
||||
dragStartX = e.touches[0].clientX;
|
||||
dragStartY = e.touches[0].clientY;
|
||||
}, { passive: true });
|
||||
|
||||
// 点击图片打开Lightbox
|
||||
img.addEventListener('click', (e) => {
|
||||
const dragDuration = Date.now() - dragStartTime;
|
||||
const dragDistanceX = Math.abs(e.clientX - dragStartX);
|
||||
const dragDistanceY = Math.abs(e.clientY - dragStartY);
|
||||
const dragDistance = Math.sqrt(dragDistanceX * dragDistanceX + dragDistanceY * dragDistanceY);
|
||||
|
||||
// 只有快速点击且移动距离小于10px才打开Lightbox
|
||||
if (dragDuration < 200 && dragDistance < 10) {
|
||||
openLightbox(img);
|
||||
e.stopPropagation(); // 阻止事件冒泡到comparison-container
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 打开Lightbox
|
||||
function openLightbox(img) {
|
||||
// 获取图片源（已经通过懒加载完成）
|
||||
const imgSrc = img.src || img.getAttribute('data-src');
|
||||
|
||||
// 如果图片还未加载，等待加载
|
||||
if (!img.src || img.src.includes('data:image/svg+xml')) {
|
||||
console.warn('图片尚未加载完成');
|
||||
return;
|
||||
}
|
||||
|
||||
// 判断是"生成图"还是"线稿"
|
||||
const isAfter = img.classList.contains('comparison-image-after');
|
||||
const labelText = isAfter ? '线稿' : '生成图';
|
||||
|
||||
// 设置图片和标签
|
||||
lightboxImage.src = imgSrc;
|
||||
lightboxLabel.textContent = labelText;
|
||||
|
||||
// 显示模态框
|
||||
lightboxModal.classList.add('active');
|
||||
|
||||
// 禁止页面滚动
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
// 关闭Lightbox
|
||||
function closeLightbox() {
|
||||
lightboxModal.classList.remove('active');
|
||||
|
||||
// 恢复页面滚动
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// 关闭按钮点击事件
|
||||
lightboxClose.addEventListener('click', (e) => {
|
||||
closeLightbox();
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// 点击遮罩层关闭（点击图片本身不关闭）
|
||||
lightboxModal.addEventListener('click', (e) => {
|
||||
if (e.target === lightboxModal) {
|
||||
closeLightbox();
|
||||
}
|
||||
});
|
||||
|
||||
// ESC键关闭
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && lightboxModal.classList.contains('active')) {
|
||||
closeLightbox();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user