104 lines
4.0 KiB
JavaScript
104 lines
4.0 KiB
JavaScript
|
// 验证公司图片网格布局修改
|
|||
|
|
|
|||
|
|
const fs = require('fs');
|
|||
|
|
const path = require('path');
|
|||
|
|
|
|||
|
|
console.log('🔍 验证公司图片网格布局修改\n');
|
|||
|
|
console.log('='.repeat(80));
|
|||
|
|
|
|||
|
|
// 1. 检查 JSX 修改
|
|||
|
|
console.log('\n1. 检查 JobInfoModal/index.jsx');
|
|||
|
|
const jsxContent = fs.readFileSync(
|
|||
|
|
path.join(__dirname, 'src/pages/CompanyJobsPage/components/JobInfoModal/index.jsx'),
|
|||
|
|
'utf-8'
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const hasGridClass = jsxContent.includes('company-images-grid');
|
|||
|
|
console.log(` ${hasGridClass ? '✅' : '❌'} 使用 company-images-grid 类名`);
|
|||
|
|
|
|||
|
|
const hasMapMethod = jsxContent.includes('data.details.companyImages.map');
|
|||
|
|
console.log(` ${hasMapMethod ? '✅' : '❌'} 使用 map 方法遍历所有图片`);
|
|||
|
|
|
|||
|
|
const hasClickHandler = jsxContent.includes('setCurrentImageIndex(index)');
|
|||
|
|
console.log(` ${hasClickHandler ? '✅' : '❌'} 设置点击图片时的索引`);
|
|||
|
|
|
|||
|
|
const hasCarouselComponents = jsxContent.includes('carousel-btn');
|
|||
|
|
console.log(` ${hasCarouselComponents ? '❌' : '✅'} 已移除轮播按钮 (${!hasCarouselComponents ? '正确' : '错误'})`);
|
|||
|
|
|
|||
|
|
// 2. 检查 CSS 修改
|
|||
|
|
console.log('\n2. 检查 JobInfoModal/index.css');
|
|||
|
|
const cssContent = fs.readFileSync(
|
|||
|
|
path.join(__dirname, 'src/pages/CompanyJobsPage/components/JobInfoModal/index.css'),
|
|||
|
|
'utf-8'
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const hasGridStyles = cssContent.includes('.company-images-grid');
|
|||
|
|
console.log(` ${hasGridStyles ? '✅' : '❌'} 定义了 .company-images-grid 样式`);
|
|||
|
|
|
|||
|
|
const hasImageItemStyles = cssContent.includes('.company-image-item');
|
|||
|
|
console.log(` ${hasImageItemStyles ? '✅' : '❌'} 定义了 .company-image-item 样式`);
|
|||
|
|
|
|||
|
|
const hasGridTemplate = cssContent.includes('grid-template-columns');
|
|||
|
|
console.log(` ${hasGridTemplate ? '✅' : '❌'} 使用 grid-template-columns`);
|
|||
|
|
|
|||
|
|
const hasMaxFourColumns = cssContent.includes('repeat(4, 1fr)');
|
|||
|
|
console.log(` ${hasMaxFourColumns ? '✅' : '❌'} 设置最多4列`);
|
|||
|
|
|
|||
|
|
const hasResponsiveGrid = cssContent.includes(':has(.company-image-item:nth-child');
|
|||
|
|
console.log(` ${hasResponsiveGrid ? '✅' : '❌'} 实现了响应式网格（根据图片数量）`);
|
|||
|
|
|
|||
|
|
const hasHoverEffect = cssContent.includes('.company-image-item:hover');
|
|||
|
|
console.log(` ${hasHoverEffect ? '✅' : '❌'} 添加了hover效果`);
|
|||
|
|
|
|||
|
|
// 3. 检查预览功能
|
|||
|
|
console.log('\n3. 检查图片预览功能');
|
|||
|
|
const hasPreviewModal = jsxContent.includes('image-preview-modal');
|
|||
|
|
console.log(` ${hasPreviewModal ? '✅' : '❌'} 保留了预览模态框`);
|
|||
|
|
|
|||
|
|
const hasPreviewNavButtons = cssContent.includes('.image-preview-btn');
|
|||
|
|
console.log(` ${hasPreviewNavButtons ? '✅' : '❌'} 保留了预览导航按钮`);
|
|||
|
|
|
|||
|
|
// 4. 检查备份文件
|
|||
|
|
console.log('\n4. 检查备份文件');
|
|||
|
|
const backupFiles = fs.readdirSync(
|
|||
|
|
path.join(__dirname, 'src/pages/CompanyJobsPage/components/JobInfoModal')
|
|||
|
|
).filter(f => f.includes('.backup_20251008'));
|
|||
|
|
|
|||
|
|
console.log(` ${backupFiles.length >= 2 ? '✅' : '❌'} 创建了备份文件 (${backupFiles.length}个)`);
|
|||
|
|
if (backupFiles.length > 0) {
|
|||
|
|
backupFiles.forEach(file => {
|
|||
|
|
console.log(` - ${file}`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('\n' + '='.repeat(80));
|
|||
|
|
|
|||
|
|
// 总结
|
|||
|
|
const allChecksPassed =
|
|||
|
|
hasGridClass &&
|
|||
|
|
hasMapMethod &&
|
|||
|
|
hasClickHandler &&
|
|||
|
|
!hasCarouselComponents &&
|
|||
|
|
hasGridStyles &&
|
|||
|
|
hasImageItemStyles &&
|
|||
|
|
hasGridTemplate &&
|
|||
|
|
hasMaxFourColumns &&
|
|||
|
|
hasResponsiveGrid &&
|
|||
|
|
hasHoverEffect &&
|
|||
|
|
hasPreviewModal &&
|
|||
|
|
hasPreviewNavButtons &&
|
|||
|
|
backupFiles.length >= 2;
|
|||
|
|
|
|||
|
|
if (allChecksPassed) {
|
|||
|
|
console.log('\n✅ 所有检查通过！公司图片已成功修改为网格布局。\n');
|
|||
|
|
console.log('📝 功能特性:');
|
|||
|
|
console.log(' - 使用CSS Grid布局，一行最多显示4张图片');
|
|||
|
|
console.log(' - 根据图片数量自动调整列数（1-4列）');
|
|||
|
|
console.log(' - 图片容器自适应板块宽度');
|
|||
|
|
console.log(' - 图片可点击查看大图');
|
|||
|
|
console.log(' - 预览模态框支持左右切换');
|
|||
|
|
console.log(' - 添加了hover悬停效果');
|
|||
|
|
} else {
|
|||
|
|
console.log('\n⚠️ 部分检查未通过，请检查上述标记为❌的项目。\n');
|
|||
|
|
}
|