报平安 Web APP

一个基于 Next.js 的住户安全状态查看平台，通过飞书多维表格 API 获取和展示住户报平安信息。

演示视频

观看视频了解开发和使用过程：

直接访问： https://www.youtube.com/watch?v=SKn2saorGKg https://www.bilibili.com/video/BV1c2BrB2EoY/

开发文档

视频中演示的开发文档见 prd.md

功能特性

• 楼栋切换：支持按楼栋（A 座、B 座等）切换查看
• 网格展示：以楼层-房号网格形式展示安全状态
• 状态颜色：
  • 🟢 绿色：安全，已撤离或在安全区域
  • 🟠 橙色：危险，无法自行撤离
  • 🔴 红色：生命危险，急需救援
  • ⚪ 灰色：未报告
• 详情查看：点击单元格查看该位置所有报平安记录
• 自动刷新：每 30 秒自动刷新数据，带倒计时显示
• 双层缓存：30 秒新鲜缓存 + 5 分钟旧数据缓存，优化访问速度

技术栈

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• 飞书开放平台 API

安装

1. 克隆项目

git clone <repository-url>
cd SafePingPub

2. 安装依赖

npm install

3. 配置环境变量

创建 .env.local 文件：

# 飞书应用凭证
FEISHU_APP_ID=cli_xxxxx
FEISHU_APP_SECRET=xxxxx

# 飞书多维表格信息
FEISHU_APP_TOKEN=xxxxx
FEISHU_TABLE_ID=tblxxxxx
FEISHU_VIEW_ID=vewxxxxx

# 提交信息的链接地址
NEXT_PUBLIC_SUBMIT_URL=https://example.com/submit

获取飞书凭证：

1. 前往 飞书开放平台 创建应用
2. 获取 App ID 和 App Secret
3. 为应用添加「多维表格」权限
4. 从多维表格 URL 中获取 app_token、table_id、view_id

4. 运行项目

开发模式：

npm run dev

生产构建：

npm run build
npm start

访问 http://localhost:3000

飞书表格结构

表格需包含以下字段：

字段名	类型	说明
编号	自动编号	记录编号
提交人	创建人	自动记录
提交时间	创建时间	自动记录
楼栋号	单选	A 座、B 座、C 座、D 座
楼层	单选	1 楼、2 楼、...
房号	单选	1 室、2 室、...
安全状态	单选	安全/危险/生命危险
受伤情况	单选	受伤程度
特殊情况	多选	儿童/老人/孕妇等
补充说明	文本	额外信息
审核	单选	公开/不公开

注意：只有「审核」字段为「公开」的记录才会显示在前端。

许可证

MIT