Record visited Chinese cities on map

README.md

@@ -1,2 +1,106 @@
-# cursor_test
-first time use cursor to create a project
+# 我的中国旅行地图
+
+一个用于记录您已经访问过的中国城市的可视化应用，以中国地图的形式呈现，可以记录初次到访的时间和备注。
+
+## 功能特点
+
+### 🗺️ 地图可视化
+- 基于 D3.js 的中国地图显示
+- 包含全国 300+ 个主要城市
+- 已访问城市用绿色标记，未访问城市用红色标记
+- 省会城市和直辖市会显示标签名称
+
+### 📝 访问记录
+- 点击城市即可记录访问信息
+- 记录初次访问日期
+- 添加访问备注（如旅游、出差、探亲等）
+- 已访问城市可以查看详情或删除记录
+
+### 🔍 搜索功能
+- 支持按城市名或省份名搜索
+- 实时过滤城市列表
+- 点击列表中的城市可高亮地图上的位置
+
+### 📊 统计信息
+- 显示已访问城市总数
+- 显示覆盖的省份数量
+- 计算旅行完成度百分比
+
+### 💾 数据管理
+- 自动保存到浏览器本地存储
+- 支持导出数据为 JSON 文件
+- 支持导入之前的数据文件
+- 一键清除所有数据
+
+## 使用方法
+
+### 基本操作
+1. **记录访问**：点击地图上的红色城市圆点
+2. **查看信息**：鼠标悬停在城市上查看详情
+3. **管理记录**：点击已访问的绿色城市圆点查看或删除记录
+4. **搜索城市**：在左侧搜索框输入城市名或省份名
+
+### 快捷键
+- `Ctrl + E`：导出数据
+- `Ctrl + I`：导入数据  
+- `ESC`：关闭模态框
+
+### 数据备份
+建议定期使用"导出数据"功能备份您的旅行记录，导出的 JSON 文件可以在其他设备上导入使用。
+
+## 技术架构
+
+- **前端框架**：原生 JavaScript + HTML5 + CSS3
+- **数据可视化**：D3.js v7
+- **地图投影**：Mercator 投影
+- **数据存储**：localStorage
+- **数据格式**：JSON
+
+## 文件结构
+
+```
+├── index.html          # 主页面
+├── app.js             # 应用逻辑
+├── china-cities.json   # 城市数据
+└── README.md          # 说明文档
+```
+
+## 城市数据
+
+应用包含中国大陆、台湾、香港、澳门的主要城市：
+- 4个直辖市
+- 34个省/自治区/特别行政区
+- 300+ 个地级市
+- 精确的经纬度坐标
+
+## 浏览器支持
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+## 开始使用
+
+1. 确保所有文件在同一目录下
+2. 使用现代浏览器打开 `index.html`
+3. 开始记录您的旅行足迹！
+
+## 更新日志
+
+### v1.0.0 (2024)
+- 初始版本发布
+- 基础地图可视化
+- 城市访问记录功能
+- 数据导入导出
+- 搜索和统计功能
+
+## 注意事项
+
+- 数据保存在浏览器本地，清除浏览器数据会丢失记录
+- 建议定期导出数据进行备份
+- 应用需要在 HTTP 服务器环境下运行（不能直接用 file:// 协议）
+
+---
+
+**享受记录旅行的乐趣！** 🎉