arundada9000/devnet

# Sajilo Sahayata - 灾害报告与协调系统 **从预警到行动，触手可及** [](https://react.dev/) [](https://vitejs.dev/) [](https://nodejs.org/) [](https://expressjs.com/) [](https://www.mongodb.com/) [](https://www.typescriptlang.org/) [](https://tailwindcss.com/) [](LICENSE) ## 概述 **Sajilo Sahayata** (नेपाली: सजिलो सहायता) 是一个实时的灾害管理平台，旨在将市民与当地政府响应人员连接起来。它通过自动位置检测、多语言支持和离线韧性，将事件报告与官方响应之间的时间差降至最低。 当市民报告事件（火灾、洪水、山体滑坡、事故等）并附带照片和 GPS 位置时，系统会自动确定负责的地方政府单位 (GaPa/NaPa)，并将警报广播到相应的管理员 dashboard。市民可以在交互式地图上查看附近的事件、联系紧急服务并追踪其报告的状态。 ### 工作原理 1. **检测** - 平台自动检测用户的位置，并识别对应的地方政府机构。 2. **报告** - 市民可以附带地理位置和照片证据提交事件报告，甚至在离线状态下也能完成。 3. **协调** - 管理员接收实时警报、管理报告，并协调响应工作。 4. **解决** - 报告状态（pending → verified → working → solved）让所有人保持知情。 ## 功能 ### 市民功能 - **事件报告** - 提交附带实时 GPS 位置和照片拍摄的报告（相机/相册） - **SMS 与 Twilio 集成** - 通过 SMS 提交紧急报告。支持会话线程以追踪后续细节。 - **AI 翻译与图像分析** - 使用 Google Gemini AI 将多语言报告（尼泊尔语、印地语、迈蒂利语等）翻译成英文，并分析附带的照片以评估灾害严重程度并进行验证。 - **离线队列** - 离线提交的报告会排队存储在 IndexedDB 中，并在网络连接恢复时自动同步 - **交互式地图** - 在 Leaflet 地图上查看按类型用颜色编码的标记聚类的所有事件 - **紧急联系人** - 特定部门的联系人（消防、警察、洪水等）已缓存以供离线访问 - **实时警报** - 推送通知附带指向地图的 deep link，用于管理员广播的紧急事件 - **多语言** - 界面提供英文、尼泊尔语、印地语、博杰普尔语和其他 5 种当地语言版本 - **资料管理** - 编辑个人详细信息（用户名、电话、电子邮件、地址、公民 ID） ### 管理员功能 - **Dashboard** - 用于事件分析的数据可视化（图表） - **报告管理** - 查看、过滤、验证、编辑和解决报告 - **双向 SMS** - 使用 Twilio 直接从 dashboard 回复 SMS 报告者 - **用户管理** - 查看按位置过滤的用户、更改角色、删除用户 - **警报广播** - 创建并发送带有自动推送通知的警报给所有订阅者 - **联系人管理** - 按部门和位置对紧急联系人号码进行 CRUD 操作 - **安全区管理** - 管理地图上显示的安全区（医院、避难所、警察局、消防站） ### 技术功能 - **PWA** - 可安装的渐进式 Web 应用，具有 Service Worker 缓存功能 - **Background Sync** - 即使标签页关闭，待处理的报告也会通过 `SyncManager` API 自动同步 - **地图瓦片缓存** - 缓存 CARTO 底图瓦片以供离线查看地图 - **TypeScript 后端** - 使用 Express + Mongoose 实现完全的类型安全 - **Vite 代码分割** - 自动 chunk 分割以实现最佳加载效果 - **React 懒加载** - 结合 Suspense 实现基于路由的代码分割 ## 技术栈 ### 前端 | 库 | 用途 | | ------------------------------ | ---------------------------------- | | **React 18** | UI 框架 | | **Vite 6** | 构建工具和开发服务器 | | **Tailwind CSS v4** | 实用优先的 CSS | | **Framer Motion** | 动画和过渡效果 | | **Zustand** | 状态管理 | | **TanStack React Query** | 服务器状态和缓存 | | **React Router v7** | 客户端路由 | | **i18next** | 国际化（9 种语言） | | **Leaflet / React-Leaflet** | 交互式地图 | | **Chart.js / react-chartjs-2** | 数据可视化 | | **Axios** | HTTP 客户端 | | **Lucide React** | 图标 | | **React Hot Toast** | Toast 通知 | | **React Helmet Async** | SEO / meta 标签 | | **Day.js** | 日期格式化 | | **Canvas Confetti** | 庆祝特效 | | **Turf.js** | 地理空间分析 | ### 后端 | 库 | 用途 | | ---------------------- | ------------------------------------ | | **Node.js 18** | Runtime | | **Express 5** | HTTP 框架 | | **TypeScript** | 类型安全 | | **Mongoose** | MongoDB ODM | | **JWT (jsonwebtoken)** | 身份验证 | | **bcrypt** | 密码哈希 | | **Cloudinary** | 图片上传和托管 | | **Multer** | 文件上传解析（内存存储） | | **Turf.js** | 点在多边形内判断（GPS → GaPa/NaPa） | | **Cookie Parser** | Cookie 处理 | | **CORS** | 跨域支持 | | **Day.js** | 日期格式化 | | **Web Push** | 推送通知 | | **dotenv** | 环境配置 | ### 数据库 - **MongoDB** - 主数据库，在 User、Report 和 SafeZone 集合上具有 `2dsphere` 地理空间索引 ## 项目结构 ``` sajilo-sahayata/ ├── frontend/ # React PWA │ ├── public/ │ │ └── sw.js # Service Worker (cache, push, sync) │ ├── src/ │ │ ├── Admin/ # Admin panel pages │ │ ├── Auth/ # Auth guard components │ │ ├── api/ # Axios instance + interceptors │ │ ├── components/ # Shared UI components │ │ ├── data/ # Dummy/fixture data │ │ ├── hooks/ # Custom React hooks │ │ ├── layouts/ # Navigation/Admin layouts │ │ ├── locales/ # i18n translation JSON files (9 langs) │ │ ├── pages/ # Route-level page components │ │ ├── routes/ # React Router configuration │ │ ├── services/ # Firebase, API service │ │ ├── stores/ # Zustand stores │ │ ├── utils/ # Offline queue, CSV export │ │ └── ...config files │ ├── vercel.json │ └── vite.config.js ├── backend/ # Express API │ ├── src/ │ │ ├── config/ # DB, Cloudinary config │ │ ├── controllers/ # Route handlers (7 controllers) │ │ ├── middlewares/ # Auth + admin guards │ │ ├── models/ # Mongoose schemas (6 models) │ │ ├── routes/ # Express routers (7 route files) │ │ ├── utils/ # resolveGaPa helper │ │ └── main.ts # Entry point │ ├── data/geojson/ # GeoJSON boundary files │ └── ...config files ├── assets/ # Screenshots, images, logos └── docs/ # Architecture & API documentation ``` ## 截图 ### Logo

User View (Tap to Expand)

Admin Panel (Tap to Expand)

## 快速开始 ### 前置条件 - Node.js v18+ - MongoDB Atlas URI（或本地 MongoDB） - npm v9+ ### 1. 克隆 ``` git clone https://github.com/arundada9000/sajilo-sahayata.git cd sajilo-sahayata ``` ### 2. 后端设置 ``` cd backend cp .env.example .env # Fill in your values npm install npm run dev # Starts on http://localhost:3000 ``` 必需的 `.env` 变量： ``` PORT=3000 MONGO_URI=your-mongodb-connection-string JWT_SECRET=your-secret-key CLIENT_URL=http://localhost:5173 CLOUDINARY_CLOUD_NAME=... CLOUDINARY_API_KEY=... CLOUDINARY_API_SECRET=... VAPID_PUBLIC_KEY=... VAPID_PRIVATE_KEY=... ``` ### 3. 前端设置 ``` cd frontend npm install npm run dev # Starts on http://localhost:5173 ``` 前端 `.env`： ``` VITE_API_URL=http://localhost:3000/api VITE_FIREBASE_CONFIG=... ``` ## 部署 ### 前端 1. 在 Vercel 中导入仓库 2. 框架预设：**Vite** 3. 根目录：`frontend` 4. 环境：`VITE_API_URL` 指向你部署的后端 5. `frontend/vercel.json` 处理 SPA 路由 ### 后端 1. 再次作为新项目导入该仓库 2. 框架预设：**Other** 3. 根目录：`backend` 4. 添加所有 `.env` 变量 5. `backend/vercel.json` 配置 `@vercel/node` 通过 `src/main.ts` 将 Express 作为 Serverless 函数运行 ## API 概述 所有 API 路由均以 `/api` 为前缀。 | 资源 | 基础路径 | 关键 Endpoint | | -------------- | ---------------- | ----------------------------------- | | **Auth** | `/api/auth` | 注册、登录、验证、个人资料 | | **Reports** | `/api/reports` | CRUD、验证、状态更改 | | **Alerts** | `/api/alerts` | 包含推送通知的 CRUD | | **Contacts** | `/api/contacts` | 按 localGov/部门划分的 CRUD | | **Location** | `/api/location` | GPS → GaPa 检测、可用列表 | | **Safe Zones** | `/api/safe-zones`| 安全位置的 CRUD | | **Push** | `/api/push` | 订阅、取消订阅、VAPID key | 完整 API 参考：[docs/API.md](docs/API.md) ## 项目背景 ## 更新日志 - **v1.3.0 (最新)** - 新增 Twilio SMS 报告、从 dashboard 进行双向 SMS 回复、Gemini AI 图像分析和多语言文本翻译（Web + SMS），以及推送通知的地图 deep linking。 - **v1.2.0** - 包含 Background Sync 的离线队列、联系人缓存、地图瓦片缓存、具有后端持久化的资料编辑、修复注册时的 GaPa 检测、管理用户位置过滤器修复 - **v1.1.0** - UI/UX 大修、管理员界面优化、自定义 SVG 地图/通知主题、支持 Vercel Serverless 部署 - **v1.0.0** - 初始版本（2025 年 8 月 2 日） ## 许可证 本项目由 **Arun Neupane** 出于教育和合理使用目的开发并维护。如需商业使用或重新分发，请联系。 ## 联系方式 [](https://facebook.com/arundada9000) [](https://instagram.com/arundada9000) [](https://wa.me/+9779811420975) [](mailto:arunneupane0000@gmail.com) [](https://youtube.com/@code_with_ease) ## 截图 ### 管理员端 | Dashboard | 报告 | 警报 | | ------------------------------------------------------------------ | ----------------------------------------------------------------- | ---------------------------------------------------------------- | | | | | | 用户 | 联系人 | 安全区 | | --------------------------------------------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------- | | | | | | 志愿者 | 首页 | | -------------------------------------------------------------------- | ------------------------------------------------------- | | | | ### 用户端 | 欢迎 | 登录 | 注册 | | ---------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | | | | | | 地图 | 报告 | 个人资料 | | ------------------------------------------------------ | --------------------------------------------------------- | ---------------------------------------------------------- | | | | | | 紧急号码 | Sahayata 通话 | | ---------------------------------------------------------- | ---------------------------------------------------------------- | | | |

标签：GNU通用公共许可证, MongoDB, Node.js, PWA, React, Syscalls, 地理信息, 灾难管理, 自定义脚本