quevingc/paunawa-app

# Paunawa — 众包实时紧急情况报告平台 一个免费、开放、众包的平台，用于在实时地图上报告和追踪紧急情况 （洪水、地震、火灾、风暴、山体滑坡、武装冲突及其他 灾害）——此外还提供一个公开可编辑的疏散中心、医院和安全点 目录——并且每次编辑都带有防篡改的审计跟踪。 **技术栈：** HTML/CSS/JS（前端）· Leaflet + OpenStreetMap（地图）· **Supabase (Postgres + Realtime + Storage)**（后端/数据库）· GitHub Pages（托管） ## 1. 项目结构 ``` paunawa-app/ ├── index.html # Single-page app shell ├── manifest.json # PWA manifest ├── service-worker.js # PWA offline app-shell caching ├── css/ │ └── style.css # All styling (design tokens, components, responsive) ├── js/ │ ├── config.js # ⚠️ Set your Supabase URL + anon key here │ ├── utils.js # Shared helpers (geolocation, validation, spam checks…) │ ├── blockchain.js # Client-side hash-chain verification │ ├── supabaseClient.js # Initializes the Supabase JS client │ ├── api.js # Talks to Supabase (reads via tables, writes via RPC) │ ├── offline.js # IndexedDB offline report queue + auto-sync │ ├── theme.js # Dark / light mode │ ├── i18n.js # Multi-language strings (en, es, fr, ar, tl) │ ├── notifications.js # Browser notifications for nearby incidents │ ├── map.js # Leaflet map, markers, clustering, heatmap, routing │ ├── reports.js # Incident report submit/edit/upvote/export logic │ ├── facilities.js # Public facility submit/edit/upvote/history logic │ ├── dashboard.js # Dashboard charts & lists (Chart.js) │ ├── sos.js # One-tap SOS mode │ ├── admin.js # Moderation panel logic │ └── app.js # App bootstrap — wires everything together ├── icons/ # PWA icons ├── supabase/ # ⭐ Current backend — run these in the Supabase SQL Editor │ ├── schema.sql # Tables + Row Level Security policies │ ├── functions.sql # RPC functions (CRUD, moderation, hash-chain audit trail) │ └── storage_policies.sql # Image bucket upload/read policies ├── gas/ # Legacy backend (Google Apps Script + Sheets) — reference only │ └── ... └── docs/ ├── SUPABASE_SETUP.md # ⭐ Start here — full setup walkthrough from zero ├── DEPLOYMENT.md # Legacy Apps Script deployment guide ├── API.md # Legacy Apps Script endpoint reference └── SHEETS_SCHEMA.md # Legacy Google Sheets schema reference ``` ## 2. 快速开始 1. **后端：** 请参阅 [`docs/SUPABASE_SETUP.md`](docs/SUPABASE_SETUP.md) — 创建一个 Supabase 账户/项目，在 SQL 编辑器中运行 `supabase/schema.sql` 和 `supabase/functions.sql`，创建 `report-images` Storage bucket，并运行 `supabase/storage_policies.sql`。 2. **前端：** 将你的 Supabase 项目 URL 和 anon key 粘贴到 `js/config.js` → `CONFIG.SUPABASE_URL` / `CONFIG.SUPABASE_ANON_KEY` 中。 3. **托管：** 将此文件夹推送到 GitHub 仓库并启用 GitHub Pages（Settings → Pages → Deploy from branch → `/ (root)`）。 4. 打开已发布的 GitHub Pages URL。立即在 Supabase 的 `settings` 表中更改默认的管理员 PIN（`adminPin`，默认为 `changeme123`）。 ### 更改后重新部署 - **前端文件**（`index.html`, `css/`, `js/`）→ 提交并推送到 GitHub；Pages 会自动重新构建。 - **后端逻辑**（`supabase/functions.sql`）→ 将更改后的 函数粘贴到 Supabase SQL 编辑器中并运行。它会立即 生效——与旧的 Apps Script 设置不同，没有单独的“部署”步骤会被遗忘。 ## 3. 功能清单 **核心 — 事件报告** - 交互式 Leaflet 地图，按紧急情况类型和状态着色，支持聚类和热力图 - 创建/编辑报告，并带有完整的版本历史记录（`updates` 表） - 评分（准确性、真实性、有用性）+ 社区点赞 - 仪表板：活跃事件、按类型统计的数量、14 天时间轴、最近和最受认可的报告 - 搜索、筛选器、深色/浅色模式、响应式移动优先的 UI - 图片上传（存储在 Supabase Storage 中，而非 base64）、画廊 + 灯箱风格预览 - 导出 CSV / JSON，带有二维码的可共享报告链接 - 针对附近活跃事件的浏览器通知 - 通过 Supabase 的 websocket 订阅实现**真正的实时更新**——不再有轮询延迟 **设施 — 可公开提交** - 任何人都可以从 **Facilities** 标签页添加疏散中心、医院或社区安全点 ——不仅限于管理员 - 与事件报告同等的处理方式：GPS 或地图图钉定位、照片、 可选的容量/联系方式/描述、可选的别名 - 带有完整的字段级版本历史记录的编辑功能 - 社区验证/点赞，带有简单的置信度得分 - 可点击的地图标记会打开与 Facilities 列表相同的详情视图 - 带有二维码的可共享链接（`?facility=ID` 深度链接） - 当附近已存在类似设施时发出重复设施警告 **防篡改审计跟踪** - 每次创建/更新/审核/评分/点赞操作——对于报告*和* 设施——都会追加一个哈希链区块（`blockchain` 表）：前一个 哈希、当前哈希、时间戳、编辑者 ID、操作。该哈希是在 Postgres 函数（`supabase/functions.sql` 中的 `_append_block`）内于服务器端计算的，并且可以在客户端独立重新验证 （`js/blockchain.js` 会重新计算并检查每一个链接）。 **公益附加功能** - 离线报告队列，在线恢复时自动同步 - 重复报告检测（相同类型，时间和空间相近） - 融合点赞与平均评分的置信度得分 - 紧急联系人目录 + SOS 一键模式 - 二维码分享、多语言 UI、关注 WCAG 的无障碍设计（跳过链接、 焦点状态、语义角色、支持减弱动画） - PWA 支持（可安装、离线 app shell） - 垃圾信息启发式检测 + 防止 SQL 注入的参数化函数 - 管理员审核仪表板（PIN 门控：隐藏 / 解决 / 标记报告和 设施、查看审计跟踪） ## 4. 注意事项与诚实的局限性 - **没有任何免费层级是真正“无限”的。** Supabase 的免费层级（500MB 数据库、1GB Storage、每月 5GB 带宽、每月 5 万活跃 API 用户）比 Apps Script 基于执行次数的配额要慷慨得多，也更适合此应用，但它仍然是一个配额，并非无穷无尽。 如果其规模超越了试点/社区级别，请为 Supabase 的 Pro 层级做好预算。 - **Blockchain** 是存储在 Postgres 表中的单账本 SHA-256 哈希链，而不是分布式区块链——它可以检测篡改，但如果拥有直接数据库访问权限的人（例如 `service_role` key 或仪表板访问权限）重新生成所有下游哈希，它无法阻止他们悄无声息地重写历史。对于这个使用场景来说，这是恰到好处的“blockchain”程度；如果被问起，请如实说明。 - **报告和设施共享一些表列。** `images`、 `updates` 和 `blockchain` 表都使用通用的 `record_id` 列 作为它们的外键——对于设施行，该列只需保存 `facility_id` 即可。它是父记录键，并非报告专有； 详情请参阅 `supabase/schema.sql`。 - **写入仅通过 SECURITY DEFINER 函数进行**，绝不会从浏览器直接进行表的 INSERT/UPDATE——Row Level Security 会阻止这种情况。 这就是阻止某人通过浏览器控制台伪造哈希链区块的原因；只有 `supabase/functions.sql` 的函数才能进行写入。 - **管理员身份验证** 为了简单起见，目前仍然是存储在表中的 PIN。在将此应用于原型/试点之外的任何场景之前，请替换为 Supabase Auth（电子邮件/魔法链接，受 `role` 检查限制）。 - 任何人都可以提交或编辑报告或设施——没有所有权 模型，因此对于高流量条目可能会发生编辑战。版本 历史记录和审计跟踪使其可见且可逆，但目前 没有任何措施可以主动预防。 ## 5. 许可证 按“原样”提供用于公益/公民用途。在显示地图时，请根据其许可注明 OpenStreetMap。

标签：CMS安全, IPv6支持, JavaScript, PWA, Supabase, 众包平台, 实时地图, 数据防篡改, 灾害应急响应, 自定义脚本