交互式EDA/CAD学术发表指南
📋 概述
这是一个基于《学术发表的投稿难度与周期分析》报告构建的交互式指南页面，帮助研究人员制定最佳投稿策略。
🎯 功能特性
1. 智能筛选系统
- 类型筛选：会议 / 期刊
- 难度等级筛选：顶级 / 高 / 应用/其他
- 评审速度筛选：快速(<10周) / 中等(10-15周) / 慢速(>15周)
- 一键重置：快速清除所有筛选条件
2. 场所卡片展示
包含7个主要发表场所：
- DAC - Design Automation Conference (顶级会议)
- ICCAD - International Conference on Computer-Aided Design (顶级会议)
- DATE - Design, Automation and Test in Europe (高级会议)
- ASP-DAC - Asia and South Pacific Design Automation Conference (高级会议)
- IEEE TCAD - Transactions on Computer-Aided Design (顶级期刊)
- ACM TODAES - Transactions on Design Automation of Electronic Systems (高级期刊)
- IEEE D&T - Design & Test (应用期刊)
每个卡片显示：
- 🏆 难度等级
- 📊 接收率
- ⏱️ 评审速度
- ⭐ 关键指标
3. 交互式模态框
- GSAP动画：卡片到模态框的流畅展开动画
- 详细信息展示：
- 关键信息（难度、主办方、页数限制、投稿指南）
- 评审过程特点
- 可视化图表（Chart.js）
- 典型发表时间线
- 降级方案：GSAP未加载时使用简化模态框
4. 投稿策略指南
手风琴式折叠面板，包含：
- 如何理解投稿难度？
- 如何规划发表时间线？
- 如何制定投稿策略？
🛠️ 技术栈
框架与组件
- Astro - 主框架
- 莫兰蒂蓝色系 - 主题色
#2c4a6b - Container组件 - 玻璃态容器
- AnimatedElement组件 - 滚动动画
外部依赖
- Chart.js 4.4.1 - 数据可视化图表
- GSAP 3.13 - 模态框动画效果
- Tailwind CSS - 样式框架
自定义脚本
./eda-venues-interactive.ts（本地脚本）
- TypeScript编写
- 完整类型定义
- 模块化设计
- 降级兼容处理
📂 文件结构
src/
├── pages/report/ai-eda-paper-report/
│ ├── index.astro # 主页面文件
│ ├── eda-venues-interactive.ts # 交互逻辑脚本（页面专用）
│ └── README.md # 文档说明
└── components/
├── Container.astro # 容器组件
├── AnimatedElement.astro # 动画组件
├── Header.astro # 页头组件
└── Footer.astro # 页脚组件
🎨 设计特点
1. 莫兰蒂蓝色系
- 主色：
#2c4a6b - 强调色：
#011a2d（深蓝） - 辅助色：
#5b778e（浅蓝）
2. 玻璃态效果
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(44, 74, 107, 0.1);
3. 响应式布局
- 桌面：3列网格
- 平板：2列网格
- 移动：单列网格
4. 动画时序
- Hero区域：200ms
- 筛选器：400ms
- 场所卡片：600ms
- 策略指南：800ms
🚀 使用方式
访问路径
/report/ai-eda-paper-report
本地开发
npm run dev
# 访问 http://localhost:4321/report/ai-eda-paper-report
生产构建
npm run build
npm run preview
📊 数据结构
VenueData接口
interface VenueData {
id: string;
name: string;
fullName: string;
type: '会议' | '期刊';
tier: '顶级' | '高' | '应用/其他';
speed: 'fast' | 'medium' | 'slow';
speedValue: number;
acceptanceRate: string;
acceptanceValue: number | null;
keyMetric: string;
pageLimit: string;
sponsors: string;
overview: string;
reviewProcess: string[];
timeline: TimelineStage[];
guidelines: string;
}
StrategyData接口
interface StrategyData {
title: string;
content: string; // HTML内容
}
🔧 核心函数
主要功能函数
renderVenues()- 渲染场所卡片openModal(venueId, cardElement)- 打开模态框（GSAP动画）openSimpleModal(venueId)- 简化模态框（降级方案）closeModal()- 关闭模态框renderStrategyAccordion()- 渲染策略手风琴initEDAVenuesInteractive()- 初始化所有交互
⚙️ 配置选项
模态框尺寸（响应式）
// 大屏幕 (≥1024px)
targetW = '70vw';
targetH = '70vh';
// 中等屏幕
targetW = '80vw';
targetH = '75vh';
// 小屏幕 (≤640px)
targetW = '92vw';
targetH = '85vh';
动画参数
// GSAP Timeline
duration: 0.5, // 模态框展开时长
ease: 'expo.out' // 缓动函数
🐛 错误处理
Chart.js加载失败
try {
if (window.Chart && venue.acceptanceValue !== null) {
// 渲染图表
}
} catch (err) {
console.warn('绘制图表时出错：', err);
}
GSAP加载失败
if (!gsap) {
console.warn('GSAP未加载，使用简化模态框');
openSimpleModal(venueId);
return;
}
📝 更新日志
2025-10-01
- ✅ 完成页面从HTML到Astro的转换
- ✅ 创建TypeScript交互脚本
- ✅ 实现GSAP模态框动画
- ✅ 添加Chart.js图表渲染
- ✅ 实现筛选器功能
- ✅ 添加策略指南手风琴
- ✅ 实现降级兼容方案
- ✅ 应用莫兰蒂蓝色系主题
🎯 未来优化方向
-
性能优化
- 懒加载Chart.js和GSAP
- 虚拟滚动大列表
- 图片优化
-
功能增强
- 添加搜索功能
- 导出PDF报告
- 个性化推荐
-
数据扩展
- 更多会议期刊数据
- 历史录取率趋势
- 审稿人反馈统计