iamiscdev/snapalert

# SnapAlert 菲律宾社区安全事件上报平台 - 集成 Supabase 身份验证、实时仪表盘，并支持市/社区级别的辖区隔离。 ## 我们提供的功能 - **Supabase Auth** - 登录、注册、会话管理 - **Supabase Database** - 存储用户响应 - **Supabase Storage** - 存储事件照片 - **辖区隔离** - 响应人员仅能通过 Supabase 行级安全性 (RLS) 查看来自其市/社区的上报信息 - **角色系统** - `citizen`（市民）、`responder`（响应人员）、`admin`（管理员） - **匿名上报** - 无需账号；市民可选择匿名或登录后上报 - **实时仪表盘** - Supabase Realtime 实时推送新上报信息 ## 技术栈 | 层级 | 工具 | |---|---| | 前端 | React 18 + Vite | | 路由 | React Router v6 | | 地图 | Leaflet.js + react-leaflet | | AI 视觉 | Claude Vision API (claude-sonnet-4-6) | | 位置 | Browser Geolocation API | | 最近设施 | Google Places API | | 后端 | Vercel Edge Functions (`/api/*`) | | 部署 | Vercel | ## 角色与默认凭据 | 角色 | 电子邮件 | 默认密码 | 访问权限 | |------------|--------------------------|---------------------|--------------------------------------| | 管理员 | admin@snapalert.ph | `Admin@2026!` | 仪表盘 - 所有辖区 | | 响应人员 | parang@marikina.gov.ph | `Parang123!` | 仪表盘 - 仅限 brgy parang | | 响应人员 | batasanhills@quezoncity.gov.ph | `Batasan123!` | 仪表盘 - 仅限 brgy batasan hills | | 响应人员 | fortbonifacio@taguig.gov.ph | `FortBonifacio123!` | 仪表盘 - 仅限 brgy fort bonifacio | | 响应人员 | rosario@pasigcity.gov.ph | `Rosario123!` | 仪表盘 - 仅限 brgy rosario | **首次登录后请立即更改这些密码。** ## 设置说明 ### 1. Supabase 项目 1. 在 [supabase.com](https://supabase.com) 创建一个新项目 2. 打开 SQL 编辑器并运行 `supabase/schema.sql` 3. 在 **Authentication > Settings** 中，配置你的站点 URL ### 2. 创建默认账号 在 **Authentication > Users** 中，创建： - `admin@snapalert.ph`，密码为 `Admin@2026!` 然后运行 `schema.sql` 中的 UPDATE 语句（在底部被注释掉的部分）以设置它们的角色。 ### 3. 环境变量 ``` VITE_ANTHROPIC_API_KEY=your_anthropic_key VITE_GOOGLE_PLACES_API_KEY=your_google_places_key VITE_SUPABASE_URL=https://your-project.supabase.co VITE_SUPABASE_ANON_KEY=your_supabase_anon_key ``` 对于无服务器 API 功能 (Vercel)，还需设置： ``` ANTHROPIC_API_KEY=... SUPABASE_URL=... SUPABASE_SERVICE_KEY=... (service role key, not anon key) ``` ### 4. 安装与运行 ``` npm install npm run dev ``` ## 辖区隔离 - **市民** 在上报时选择其市/社区（匿名上报时可选） - **响应人员** 在其个人资料中被分配一个市（以及可选的社区） - Supabase RLS 确保响应人员的仪表盘查询仅返回与其所在市匹配的上报信息 - **管理员** 可以查看所有辖区的所有上报信息 ## 添加更多市/社区 编辑 `src/lib/jurisdictions.js` 以添加更多市及其下属社区。 ## 页面 | 路径 | 描述 | |--------------|-------------------------------------------| | `/` | 快照上报页面（匿名或登录） | | `/login` | 管理员/响应人员/市民登录 | | `/register` | 市民账号注册 | | `/myreports` | 市民仪表盘（需认证） | | `/dashboard` | 管理员/响应人员仪表盘（需认证） |

标签：Claude API, jurisdiction-isolation, Leaflet, OSV, React, RLS, Supabase, Syscalls, Vercel, Vite, 事件报告, 人工智能分析, 公共安全, 匿名举报, 图片上传, 地图可视化, 地理定位, 实时仪表盘, 库, 应急响应, 智慧城市, 社区安全, 自定义脚本, 菲律宾, 角色权限管理, 计算机视觉, 边缘计算