docs: 添加应用截图和开发指南

- 添加 4 张应用截图展示核心功能
- 更新 README 添加截图展示区域
- 创建 DEVELOPMENT.md 开发指南
- 优化 .gitignore 配置

Author: Doubleking-1

.gitignore

@@ -1,18 +1,25 @@
+# ===================================
+# 敏感配置文件 - 包含真实 API keys
+# ===================================
+js/config.js
+js/config.local.js
+
+# ===================================
 # Node modules
 node_modules/
 
 # Build outputs
 dist/
 build/
 
-# 敏感配置文件 - 包含真实 API keys
-js/config.js
-
+# ===================================
 # 用户数据和缓存
 *.log
 *.cache
 
 # 操作系统文件
+# ===================================
+# macOS
 .DS_Store
 Thumbs.db
 

DEVELOPMENT.md

@@ -0,0 +1,193 @@
+# 🔄 后续开发工作流程指南
+
+## 📝 日常开发流程
+
+### 1. 修改代码
+
+在本地正常编辑您的项目文件：
+```bash
+# 打开项目目录
+cd /Users/dk/Codes/train/dev
+
+# 使用您喜欢的编辑器修改代码
+# 可以是 VS Code、Sublime Text 等
+```
+
+### 2. 本地测试
+
+```bash
+# 在浏览器中打开测试
+open index.html
+open app.html
+
+# 或使用本地服务器
+python -m http.server 8000
+# 然后访问 http://localhost:8000
+```
+
+### 3. 提交到 Git
+
+```bash
+# 1. 查看修改了哪些文件
+git status
+
+# 2. 添加修改的文件
+git add .                    # 添加所有修改
+# 或
+git add 文件名.js            # 只添加特定文件
+
+# 3. 提交修改（写清楚改了什么）
+git commit -m "feat: 添加新功能XXX"
+# 或
+git commit -m "fix: 修复XXX问题"
+# 或
+git commit -m "docs: 更新文档"
+
+# 4. 推送到 GitHub
+git push
+```
+
+### 4. 自动更新到在线演示
+
+推送成功后，GitHub Pages 会自动部署：
+- 等待 1-2 分钟
+- 访问 https://doubleking-1.github.io/train-flight-records-manager/
+- 就能看到最新版本
+
+## 🎯 常见开发场景
+
+### 场景 1：添加新功能
+
+```bash
+# 1. 修改代码（例如在 js/app.js 中添加新功能）
+# 2. 本地测试确认功能正常
+# 3. 提交
+git add js/app.js
+git commit -m "feat: 添加导出 PDF 功能"
+git push
+```
+
+### 场景 2：修复 Bug
+
+```bash
+# 1. 修改代码修复问题
+# 2. 测试确认修复成功
+# 3. 提交
+git add .
+git commit -m "fix: 修复地图加载失败的问题"
+git push
+```
+
+### 场景 3：更新文档
+
+```bash
+# 1. 修改 README.md 或其他文档
+# 2. 提交
+git add README.md CHANGELOG.md
+git commit -m "docs: 更新使用说明"
+git push
+```
+
+### 场景 4：更新版本
+
+当累积了足够多的更新，可以发布新版本：
+
+```bash
+# 1. 更新 CHANGELOG.md，添加新版本说明
+# 2. 修改版本号（如 README.md 中的版本）
+# 3. 更新 js/app.js 中的导出版本号
+# 4. 提交
+git add .
+git commit -m "chore: 发布 v8.1.0"
+git push
+
+# 5. 在 GitHub 上创建 Release
+# 访问 https://github.com/Doubleking-1/train-flight-records-manager/releases
+# 点击 "Create a new release"
+# 填写版本号和更新说明
+```
+
+## ⚠️ 重要注意事项
+
+### 1. 保护真实 API Keys
+
+```bash
+# ❌ 永远不要提交包含真实密钥的 config.js
+git status  # 确认 js/config.js 不在待提交列表中
+
+# ✅ 只提交模板文件
+git add js/config.example.js  # 可以提交
+```
+
+### 2. 遇到推送被拒绝
+
+如果出现 `rejected` 错误：
+
+```bash
+# 先拉取最新代码
+git pull --rebase
+
+# 解决冲突（如果有）
+# 然后再推送
+git push
+```
+
+### 3. 查看提交历史
+
+```bash
+# 查看最近的提交
+git log --oneline -10
+
+# 查看某个文件的修改历史
+git log --oneline -- js/app.js
+```
+
+### 4. 撤销修改
+
+```bash
+# 撤销工作区的修改（还没 git add）
+git restore 文件名
+
+# 撤销已 add 的文件（还没 commit）
+git restore --staged 文件名
+
+# 撤销上一次提交（已 commit 但还没 push）
+git reset --soft HEAD~1
+```
+
+## 📋 提交信息规范（建议）
+
+使用清晰的提交信息：
+
+- `feat: 添加XXX功能` - 新功能
+- `fix: 修复XXX问题` - Bug 修复
+- `docs: 更新XXX文档` - 文档更新
+- `style: 调整XXX样式` - 样式调整
+- `refactor: 重构XXX` - 代码重构
+- `test: 添加XXX测试` - 添加测试
+- `chore: 更新XXX配置` - 构建/配置更新
+
+## 🔄 完整开发循环
+
+```
+修改代码 → 本地测试 → git add → git commit → git push → GitHub Pages 自动部署 → 在线查看效果
+```
+
+## 💾 备份建议
+
+```bash
+# 定期创建完整备份
+cp -r /Users/dk/Codes/train/dev ~/Backups/train-dev-$(date +%Y%m%d)
+
+# 或使用 Time Machine / iCloud
+```
+
+## 🆘 需要帮助？
+
+如果遇到问题：
+1. 查看 Git 状态：`git status`
+2. 查看错误信息：仔细阅读 git 的提示
+3. 搜索解决方案：复制错误信息到 Google
+4. 提 Issue：在 GitHub 上向自己的仓库提 Issue 记录问题
+
+## 🎊 祝开发愉快！

README.md

@@ -16,6 +16,19 @@
 - 导入本地数据文件进行测试
 - 完整功能配置请参考下方[快速开始](#快速开始)部分
 
+## 📸 应用截图
+
+### 主页 - 地图概览
+![主页截图](screenshots/homepage.png)
+
+### 管理页面 - 数据编辑
+![管理页面](screenshots/management.png)
+
+### 统计图表
+![统计图表](screenshots/charts.png)
+
+### 地图可视化
+![地图可视化](screenshots/map-visualization.png)
 
 ## ✨ 主要特性
 

screenshots/.gitkeep

@@ -0,0 +1,67 @@
+# 截图指南
+
+## 📸 如何创建应用截图
+
+为了让 README 展示效果最佳，请按以下步骤创建截图：
+
+### 需要的截图
+
+1. **homepage.png** - 主页地图概览
+   - 打开 `index.html`
+   - 确保显示了火车和飞机的路线
+   - 使用 macOS 截图：`Cmd + Shift + 4`
+   - 保存为 `screenshots/homepage.png`
+
+2. **management.png** - 管理页面
+   - 打开 `app.html`
+   - 显示数据表格、统计面板
+   - 截图保存为 `screenshots/management.png`
+
+3. **charts.png** - 统计图表
+   - 在 `app.html` 中切换到"统计"标签
+   - 显示各种图表（年度、铁路局、车型等）
+   - 截图保存为 `screenshots/charts.png`
+
+4. **map-visualization.png** - 地图可视化
+   - 在 `app.html` 中显示地图
+   - 显示路线动画或多条路线
+   - 截图保存为 `screenshots/map-visualization.png`
+
+### 截图技巧
+
+1. **分辨率**: 建议 1920x1080 或更高
+2. **清晰度**: 确保文字清晰可读
+3. **内容**: 包含实际数据，不要空白
+4. **尺寸**: 压缩后每张不超过 500KB
+
+### 截图后
+
+1. 将截图文件放入 `screenshots/` 目录
+2. 提交到 Git:
+   ```bash
+   git add screenshots/
+   git commit -m "docs: 添加应用截图"
+   git push
+   ```
+
+3. 刷新 GitHub 仓库页面，截图会自动显示在 README 中
+
+### 可选：压缩图片
+
+使用工具压缩图片以减小仓库大小：
+- macOS: ImageOptim (https://imageoptim.com/)
+- 在线工具: TinyPNG (https://tinypng.com/)
+
+### 示例
+
+好的截图应该：
+- ✅ 显示应用的核心功能
+- ✅ 包含真实的数据示例
+- ✅ 界面完整，没有被裁切
+- ✅ 配色和主题一致（建议使用暗色模式）
+
+避免：
+- ❌ 空白页面
+- ❌ 加载中的状态
+- ❌ 错误提示
+- ❌ 分辨率过低