淮海战役 H5 互动地图
一个徐州本地人的红色文化数字化实践。
我是徐州人。从小在淮海战役纪念馆的坦克旁边跑来跑去，听过太多关于这场战役的故事——碾庄、双堆集、陈官庄，这些地名对别人来说可能只是历史课本上的几行字，对我来说却是家门口的坐标。
大一寒假的社会实践，我把”写代码”和”讲家乡故事”这两件事合在了一起。成果就是这个 淮海战役红色文化 H5 互动地图——一个面向手机、平板和电脑的数字化展示平台。
🔗 在线体验：huaihai.zylatent.com↗
🎯 项目定位
本平台是社会实践成果展示，不是专业旅游导航或历史数据库。所有遗址信息均来自公开权威资料，底图依据公开史料重新绘制。
核心视觉是一张泛黄的历史地图，上面分布着 16 处红色地标——战场旧址、指挥所、起义地点、纪念场馆。点击任何一个节点，都会展开一份图文档案。
✨ 功能概览
| 模块 | 说明 |
|---|---|
| 📜 卷轴开场动画 | 首次进入时，红色文化主题的卷轴式展开 |
| 🗺️ 战役态势底图 | 依据公开资料重绘的原创示意图 |
| 📍 16 处地标节点 | 覆盖战场、指挥部、起义地、纪念设施 |
| ⏳ 三阶段时间线 | 第一阶段 / 第二阶段 / 第三阶段 + 纪念场馆筛选 |
| 🔍 遗址搜索 | 按名称、地区（江苏/安徽/河南）、类型检索 |
| 📖 图文档案 | 每处遗址包含封面图、历史文字、照片廊、来源链接、视频槽位 |
| 🎬 视频支持 | 跳转 B站或权威平台视频链接 |
| 🗺️ 高德地图 | 一键跳转遗址地理位置 |
| 📱 响应式适配 | 手机底部导航 / 平板网格 / 桌面侧边栏，320px ~ 1440px 全覆盖 |
| 📴 PWA 离线 | Service Worker + Web App Manifest，离线可访问外壳 |
多端截图
桌面端地图展示
手机端遗址名录
桌面端遗址名录
🛠️ 技术栈
| 技术 | 说明 |
|---|---|
| React 18 | 组件化 UI |
| Vite 8 | 构建工具 |
| TypeScript 5.6 | 类型安全 |
| Tailwind CSS 3 | 样式系统 |
| react-zoom-pan-pinch | 地图拖拽、双指缩放、滚轮缩放 |
| 高德开放平台 JS API 2.0 | 可选的地图增强（需配置 Key） |
| PWA | Service Worker 离线缓存 |
| Azure Static Web Apps | 托管部署 |
纯静态前端：不使用数据库、后台服务、用户系统或权限系统。所有遗址数据存储在 src/data/sites.json 中，坐标采用相对于底图的百分比定位，非经纬度。
📂 项目结构
HuaiHai-h5-map/├── public/│ ├── archive-map.svg # 原创战役态势底图│ ├── site-placeholder.svg # 遗址封面占位图│ ├── manifest.webmanifest│ ├── sw.js│ └── staticwebapp.config.json├── src/│ ├── components/ # 导航、地图、时间线、名录、详情│ ├── data/sites.json # 遗址数据唯一入口│ ├── styles/ # 设计令牌和全局样式│ └── types/├── docs/│ ├── material-checklist.md # 资料收集清单│ ├── content-guide.md # 内容替换说明│ ├── qa-report.md # 多端验收结果│ └── qa/ # 截图├── scripts/validate-content.mjs # 内容校验脚本└── design-system/MASTER.md # 设计系统文档📋 完成度
React H5 基础工程、16 处地标结构、三阶段时间线、地图交互、搜索筛选、图文档案、PWA 离线、Azure 部署 —— 全部已完成。
遗址史料细节：11/16 已核实。历史照片和专题视频：持续补充中。
📜 内容原则
- 不编造遗址名称、战役经过、人物、日期和伤亡数据
- 史料优先采用纪念馆、政府、党史部门和正式出版物
- 所有图片标注来源、作者/收藏机构、版权状态和说明
- 底图为依据公开资料重新绘制的原创示意图
- 视频不自行托管，优先使用权威平台或 B站链接
🌐 部署
项目部署在 Azure Static Web Apps，配置了自定义域名 huaihai.zylatent.com。每次 main 分支 push 自动构建部署。
🔗 查看源代码 (GitHub)↗ · 🌐 在线体验↗
Thanks for reading!