finally finish all website check in.
This commit is contained in:
Jiao77
247
src/pages/report/ai-eda-paper-report/README.md
Normal file
247
src/pages/report/ai-eda-paper-report/README.md
Normal file
@@ -0,0 +1,247 @@
|
||||
# 交互式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)
|
||||
Reference in New Issue
Block a user