| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Name | Name | Last commit date | ||
|---|---|---|---|---|
一个基于 React + TypeScript 的交互式地图应用，用于在地图上标记和管理同学信息，方便记录和查看各地同学分布情况。
🎯 项目特点：纯前端应用，无需后端服务，所有数据存储在浏览器本地，支持离线使用。
蹭饭地图是一个轻量级的 Web 应用，支持在中国地图和美国地图上添加、编辑和管理同学信息。通过可视化的方式展示同学的地理分布，并支持导出为图片格式，方便分享和保存。
npm installnpm run dev应用将在 http://localhost:5173 启动。
npm run build构建产物将输出到 dist 目录。
npm run previewmeal-map/ ├── .github/ │ └── workflows/ │ └── deploy.yml # GitHub Actions 自动部署配置 ├── public/ # 静态资源 │ ├── data/ # 地图配置文件 │ │ └── maps-config.json # 中国和美国地图元数据 │ ├── maps/ # SVG 地图文件 │ │ ├── china/ # 中国各省 SVG 地图（34个文件） │ │ ├── usa/ # 美国各州 SVG 地图 │ │ ├── china-combined.svg # 中国合并地图 │ │ └── usa-combined.svg # 美国合并地图 │ └── regions/ # 区域数据（可选） ├── src/ │ ├── components/ # React 组件 │ │ ├── InteractiveMap.tsx # 交互式地图组件（核心） │ │ ├── Navigation.tsx # 导航栏组件 │ │ ├── StudentCard.tsx # 学生卡片组件 │ │ ├── StudentModal.tsx # 学生信息编辑弹窗 │ │ ├── StudentListModal.tsx # 学生列表弹窗 │ │ ├── ExportModal.tsx # 导出弹窗 │ │ ├── RegionColorManager.tsx # 区域颜色管理组件 │ │ ├── ColorPicker.tsx # 颜色选择器组件 │ │ └── ErrorBoundary.tsx # 错误边界组件 │ ├── lib/ # 工具库 │ │ ├── storage.ts # 本地存储管理 │ │ └── types.ts # 类型定义（Region, MapsConfig） │ ├── App.tsx # 主应用组件 │ ├── main.tsx # 应用入口 │ └── index.css # 全局样式 ├── index.html # HTML 模板 ├── package.json # 项目配置和依赖 ├── package-lock.json # 依赖锁定文件 ├── tsconfig.json # TypeScript 主配置 ├── tsconfig.app.json # TypeScript 应用配置 ├── tsconfig.node.json # TypeScript Node 配置 ├── vite.config.ts # Vite 配置（含代码分割优化） ├── tailwind.config.js # Tailwind CSS 配置 ├── postcss.config.js # PostCSS 配置 ├── eslint.config.js # ESLint 配置 └── README.md # 项目文档
地图配置文件位于 public/data/maps-config.json，包含：
地图文件：
样式设置保存在浏览器 localStorage 中，包括：
可在"颜色管理"中调整这些设置。
所有数据使用以下 localStorage 键名：
项目已配置代码分割优化（vite.config.ts）：
这样可以：
项目提供以下预设颜色：
也支持使用自定义十六进制颜色值。
建议使用最新版本的现代浏览器以获得最佳体验。
项目使用 ESLint 进行代码检查：
npm run lint项目已配置代码分割（vite.config.ts），构建后的文件会被分割为多个 chunk：
所有 chunk 都小于 500KB，优化了加载性能和缓存效率。
项目支持通过环境变量配置（如果需要）：
项目内置数据迁移机制，当数据结构发生变化时，会自动迁移旧数据到新格式。当前版本：v3.0
项目在 package.json 中的名称是 react_repo，这是历史遗留，实际项目名称为"蹭饭地图"。
项目已配置 GitHub Actions 自动部署：
配置文件：.github/workflows/deploy.yml
项目使用标准的 Vite 构建，可以部署到任何支持静态网站托管的平台：
欢迎提交 Issue 和 Pull Request！
本项目采用 MIT 许可证。
如有问题或建议，欢迎通过 Issue 反馈。
享受使用蹭饭地图，记录你的同学分布！ 🎉
| Back | FazBrowse Home | New Git URL |