AI雅尔塔：2026

一个展现多智能体冲突与对话的沉浸式叙事网站

项目简介

本网站将"AI雅尔塔会议2026"的虚构对话记录转化为一个极具史诗感和戏剧张力的互动叙事体验。以1945年雅尔塔会议的历史厚重感为基底，融合冷战时期政治漫画的视觉基因与现代数字媒体的先锋排版，展现五位AI领袖围绕模型许可、开源边界、就业冲击和中美竞争的激烈辩论。

技术栈

• React + TypeScript + Vite
• Tailwind CSS
• GSAP (动画引擎)
• Lenis (平滑滚动)
• Canvas 2D (粒子特效)

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

部署到 GitHub Pages

第一步：创建 GitHub 仓库

1. 在 GitHub 上创建一个新仓库（例如 ai-yalta-2026）
2. 不要初始化 README、.gitignore 或 License

第二步：推送代码

# 在项目根目录执行
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/你的用户名/ai-yalta-2026.git
git push -u origin main

第三步：启用 GitHub Pages

1. 打开仓库的 Settings 页面
2. 点击左侧 Pages 菜单
3. 在 Source 部分选择 GitHub Actions
4. GitHub Actions 工作流（.github/workflows/deploy.yml）会自动触发部署

第四步：访问网站

部署完成后，访问 https://你的用户名.github.io/ai-yalta-2026/

项目结构

.
├── public/
│   ├── images/          # 角色宣传图
│   └── videos/          # 首屏背景视频
├── src/
│   ├── components/      # 可复用组件
│   │   └── ParticlesCanvas.tsx   # 粒子对撞特效
│   ├── data/
│   │   └── conferenceData.ts     # 对话与决议数据
│   ├── sections/        # 页面区域
│   │   ├── HeroSection.tsx       # 首屏
│   │   ├── AgentsSection.tsx     # 角色介绍
│   │   ├── TopicsSection.tsx     # 议题交锋
│   │   ├── ResolutionsSection.tsx # 会议决议
│   │   └── FooterSection.tsx     # 尾声
│   ├── App.tsx          # 主组件
│   └── main.tsx         # 入口
└── .github/workflows/
    └── deploy.yml        # GitHub Pages 部署工作流

设计特色

• 深邃普鲁士蓝 (#0A1628) 主色调，营造冷战密室氛围
• 猩红与琥珀双色对抗系统，代表不同立场
• 思源宋体 + Montserrat 粗野主义排版
• Canvas 粒子对撞特效，模拟观点交锋
• 电影级视频背景与打字机效果
• Lenis 平滑滚动，提供沉重感的浏览体验