# 交互式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. 玻璃态效果
```css
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
```

### 本地开发
```bash
npm run dev
# 访问 http://localhost:4321/report/ai-eda-paper-report
```

### 生产构建
```bash
npm run build
npm run preview
```

## 📊 数据结构

### VenueData接口
```typescript
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接口
```typescript
interface StrategyData {
  title: string;
  content: string;  // HTML内容
}
```

## 🔧 核心函数

### 主要功能函数
- `renderVenues()` - 渲染场所卡片
- `openModal(venueId, cardElement)` - 打开模态框（GSAP动画）
- `openSimpleModal(venueId)` - 简化模态框（降级方案）
- `closeModal()` - 关闭模态框
- `renderStrategyAccordion()` - 渲染策略手风琴
- `initEDAVenuesInteractive()` - 初始化所有交互

## ⚙️ 配置选项

### 模态框尺寸（响应式）
```typescript
// 大屏幕 (≥1024px)
targetW = '70vw';
targetH = '70vh';

// 中等屏幕
targetW = '80vw';
targetH = '75vh';

// 小屏幕 (≤640px)
targetW = '92vw';
targetH = '85vh';
```

### 动画参数
```typescript
// GSAP Timeline
duration: 0.5,     // 模态框展开时长
ease: 'expo.out'   // 缓动函数
```

## 🐛 错误处理

### Chart.js加载失败
```typescript
try {
  if (window.Chart && venue.acceptanceValue !== null) {
    // 渲染图表
  }
} catch (err) {
  console.warn('绘制图表时出错：', err);
}
```

### GSAP加载失败
```typescript
if (!gsap) {
  console.warn('GSAP未加载，使用简化模态框');
  openSimpleModal(venueId);
  return;
}
```

## 📝 更新日志

### 2025-10-01
- ✅ 完成页面从HTML到Astro的转换
- ✅ 创建TypeScript交互脚本
- ✅ 实现GSAP模态框动画
- ✅ 添加Chart.js图表渲染
- ✅ 实现筛选器功能
- ✅ 添加策略指南手风琴
- ✅ 实现降级兼容方案
- ✅ 应用莫兰蒂蓝色系主题

## 🎯 未来优化方向

1. **性能优化**
   - 懒加载Chart.js和GSAP
   - 虚拟滚动大列表
   - 图片优化

2. **功能增强**
   - 添加搜索功能
   - 导出PDF报告
   - 个性化推荐

3. **数据扩展**
   - 更多会议期刊数据
   - 历史录取率趋势
   - 审稿人反馈统计

## 📚 相关文档

- [Astro文档](https://docs.astro.build/)
- [GSAP文档](https://greensock.com/docs/)
- [Chart.js文档](https://www.chartjs.org/docs/)
- [报告模板文档](../template/README.md)