古战场

6-9 岁儿童向的纸上古代战争史 · 从商周易代到淝水之战 · 首发 43 场中国战役，世界篇逐场完善后开放

一个互动式儿童古代战争学习网站。每个战役用 6-9 岁孩子能听懂的语言讲清"为什么打、怎么打、赢了学什么"，配写实油画风的战术图、互动沙盘、决策点和测验题，让孩子像"小统帅"一样在 2000 年前的战场上做选择。

🔗 在线版: https://guchangchang.vast-book-5338.chatgpt.site （当前线上为旧版本，首发版本待发布）

✨ 特色

• 43 场首发战役 — 从牧野之战（~前 1046 BC）到淝水之战（383 AD），覆盖商周、春秋、战国、秦汉、三国、南北朝；萨拉米斯、坎尼两场世界战役保留数据与素材，逐场验收后开放
• 146 个统帅决策 — 每场战役让孩子在关键时刻做选择，再看历史上的真实答案
• 179 道统帅小题 — 每场战役附测验题，巩固学习
• 写实战术图 — 首发战役 153 组写实油画风战术图（原图 + 400w 小图），关键动作可视化
• 互动沙盘 — 军队按阶段推进，可拖动时间轴回顾关键节点
• 史实严谨 — 每场战役带正史出处（《左传》《史记》等），兵力"史料未载"必标，异说并列，传说明标
• 6-9 岁儿童向语言 — 短句、对话感、生活化类比，避免抽象术语和文言

🎬 战役列表

商周之际

• 牧野之战（~前 1046）— 武王伐纣，前徒倒戈
• 周公东征（西周初年）— 王室幼主、东部叛乱与成周营建
• 昭王南征（西周中期）— 汉水、荆楚与青铜器证据中的系列远征
• 宣王伐玁狁（西周晚期）— 诗歌、太原与北洛水战功的多声部记忆
• 犬戎之乱·骊山（约前 771）— 烽火失信、王室危机与周室东迁

春秋（前 770 — 前 476）

• 繻葛之战 · 长勺之战 · 假途伐虢 · 召陵之师 · 乾时之战 · 泓水之战 · 城濮之战 · 崤之战
• 邲之战 · 鞍之战 · 韩原之战 · 麻隧之战 · 鄢陵之战 · 湛阪之战 · 平阴之战 · 柏举之战
• 槜李之战 · 夫椒之战 · 艾陵之战 · 笠泽之战 · 智氏覆灭之战

战国（前 475 — 前 221）

• 桂陵之战 · 马陵之战 · 宜阳之战 · 垂沙之战 · 即墨之战 · 鄢郢之战 · 阏与之战
• 长平之战 · 邯郸之战 · 灭楚之战

世界篇（筹备中，暂未开放）

• 萨拉米斯海战（前 480）— 狭窄海峡让数量优势难以展开
• 坎尼会战（前 216）— 双重包围的经典案例

秦汉

• 巨鹿之战 · 垓下之战 · 白登之围

三国 / 南北朝

• 官渡之战 · 赤壁之战 · 夷陵之战 · 淝水之战

🛠 技术栈

• 框架: React 19 + Vite 7
• 语言: TypeScript 5
• 样式: Tailwind CSS 3.4.19
• 动画: framer-motion 12
• 字体: Ma Shan Zheng（本地化）
• 数据: 静态 TypeScript 数据（45 场战役 + 沙盘 + 决策 + 测验）

🚀 本地开发

# 装依赖
cd app
npm install

# 启动 dev server（默认 3000 端口）
npm run dev

# 跑 build（验证类型 + 构建）
npm run build

# 预览 build 结果
npm run preview

📁 项目结构

.
├── app/                          # React 应用
│   ├── src/
│   │   ├── data/battles/         # 45 场战役数据
│   │   │   ├── index.ts          # 战役索引
│   │   │   ├── ../types.ts       # 全站数据契约
│   │   │   ├── muye.ts           # 牧野之战
│   │   │   ├── qianshi.ts        # 乾时之战
│   │   │   └── ...               # 等等
│   │   ├── pages/                # 页面（Home / Battles / BattleDetail / About）
│   │   ├── components/           # 组件
│   │   │   ├── battle/           # 战役详情、沙盘、TacticCard
│   │   │   ├── battles/          # 战役长卷、ChapterBlock、MiniRail
│   │   │   ├── home/             # HeroSection、TimelineRail
│   │   │   └── ...
│   │   ├── lib/                  # 工具
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── public/                   # 静态资源
│   │   ├── battle-*.png          # 45 场战役 × 3 档尺寸（135 个 PNG）
│   │   ├── tactic-*.webp         # 160 组战术图（原图 + 400w，共 320 个 WebP）
│   │   └── fonts/ma-shan-zheng.ttf
│   ├── index.html
│   ├── package.json
│   └── vite.config.ts
├── research/                     # 21 场战役的背景调研（部分主题合订）
│   ├── README.md
│   ├── chengpu.md                # 城濮之战
│   ├── muye.md
│   └── ...
├── review/                       # 23 份战役校审与事实复核记录
│   ├── chengpu.md
│   └── ...
├── _audit-*.py                   # 截图/审计脚本（开发用）
├── _resize-*.py                  # 图片 resize 脚本（开发用）
├── _verify-*.py                  # 战术图验证脚本（开发用）
├── .gitignore
├── README.md
└── plan.md

📊 数据统计

维度	数量
首发开放战役	43（另有 2 场世界篇筹备中）
沙盘阶段（stages）	222
统帅决策点	146
战术卡	153
成语	139
测验题	179
写实油画风图	100+

📚 史源

每场战役的数据文件头部都标注了正史出处。常用史源：

• 《左传》（春秋三传之首）
• 《史记》（汉·司马迁，含十二本纪、三十世家、七十列传）
• 《资治通鉴》（宋·司马光）
• 《战国策》
• 《逸周书》
• 《尚书》
• 《诗经》

🎨 设计原则

• 史实严谨 > 戏剧效果 — 兵力数字"史料未载"必标，异说并列
• 儿童语言 > 文言典雅 — 短句、对话感、生活化类比
• 写实风格 > 符号简图 — 战术图均为写实油画风格，不用鸟瞰/符号/简图
• 教育意义 > 信息密度 — 每张战术卡都点出"赢了学什么"

📝 License

未指定 — 默认保留所有权利。如需用于公开教学、衍生创作等，欢迎联系作者讨论。

🙏 致谢

• 史源：司马迁《史记》、左丘明《左传》等古代典籍
• 图生成：项目使用的写实油画风战术图由 AI 图像生成模型辅助产出
• 项目用 AI 辅助开发（数据编写、代码整合、史实校对、图片生成、网页渲染验证）

📮 反馈

这是给儿子（6-9 岁）学历史用的家庭项目。如有建议、史实勘误或内容补充，欢迎在 GitHub Issues 中提。