Sai-pavan-05/War-Room-Dashboard
GitHub: Sai-pavan-05/War-Room-Dashboard
基于 Next.js 和 Supabase 构建的实时事件响应作战室仪表板，提供团队在关键系统故障期间协同所需的实时聊天、任务同步和在线状态跟踪功能。
Stars: 0 | Forks: 0
# 🚨 Serverless 实时作战室仪表板
这是一个为事件响应、高风险项目协调和实时团队协作而构建的实时交互式仪表板。本应用采用现代的 serverless 架构，确保在所有已连接的客户端之间实现即时状态同步，且无需承担管理自定义 WebSocket 服务器的开销。
## ✨ 核心功能
* **实时同步：** 由 Supabase Realtime 提供支持，任何数据库更改（任务、聊天消息、事件状态）都会立即广播给所有已连接的客户端。
* **Edge 就绪渲染：** 利用 Next.js App Router 和 Server Components 实现近乎即时的初始页面加载和零布局偏移。
* **安全的多租户：** 集成 Supabase Auth 和 PostgreSQL 行级安全性 (RLS)，以确保用户只能访问其有权查看的事件。
* **现代 UI/UX：** 使用 Tailwind CSS 进行样式设计并添加动画效果，提供时尚、响应迅速且易于访问的用户体验。
## 🛠️ 技术栈
* **框架：** [Next.js](https://nextjs.org/) (React)
* **语言：** [TypeScript](https://www.typescriptlang.org/)
* **数据库与身份验证：** [Supabase](https://supabase.com/) (PostgreSQL)
* **样式：** [Tailwind CSS](https://tailwindcss.com/)
* **图标：** [Lucide React](https://lucide.dev/)
## 🚀 快速开始
### 前置条件
* Node.js 18.17 或更高版本
* Supabase 账号和项目
### 1. 克隆仓库
```
git clone [https://github.com/your-username/war-room-dashboard.git](https://github.com/your-username/war-room-dashboard.git)
cd war-room-dashboard
```
### 2. 安装依赖
```
npm install
# 或
yarn install
# 或
pnpm install
```
### 3. 设置环境变量
在项目的根目录下创建一个 `.env.local` 文件，并添加您的 Supabase 凭证：
```
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
```
### 4. 数据库设置 (Supabase)
在您的 Supabase SQL 编辑器中运行以下 SQL 命令以建立 schema：
```
-- Create Incidents Table
CREATE TABLE incidents (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
title TEXT NOT NULL,
status TEXT DEFAULT 'active',
severity TEXT DEFAULT 'medium',
created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);
-- Create Tasks Table
CREATE TABLE tasks (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
incident_id UUID REFERENCES incidents(id) ON DELETE CASCADE,
title TEXT NOT NULL,
is_completed BOOLEAN DEFAULT false,
created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);
-- Create Messages Table
CREATE TABLE messages (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
incident_id UUID REFERENCES incidents(id) ON DELETE CASCADE,
user_id UUID REFERENCES auth.users(id),
content TEXT NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);
```
*注意：请确保在您的 Supabase 仪表板设置中为 `incidents`、`tasks` 和 `messages` 表启用 Realtime（Insert、Update、Delete）。*
### 5. 运行开发服务器
```
npm run dev
# 或
yarn dev
```
使用浏览器打开 [https://war-room-dashboard-fv2cmnx4k-devprs.vercel.app/login](https://war-room-dashboard-fv2cmnx4k-devprs.vercel.app/login) 查看结果。
## 📂 项目结构
```
├── src/
│ ├── app/ # Next.js App Router (pages, layouts, globals)
│ │ ├── dashboard/ # Protected dashboard routes
│ │ ├── login/ # Authentication pages
│ │ └── ...
│ ├── lib/ # Utility functions and configurations
│ │ └── supabase.ts # Supabase client initialization
│ └── proxy.ts # Proxy configurations
├── public/ # Static assets (SVGs, icons)
├── package.json # Project dependencies and scripts
├── tailwind.config.ts # Tailwind CSS configuration (if applicable)
└── tsconfig.json # TypeScript configuration
```
## 🤝 贡献
欢迎提交 Pull request。对于重大更改，请先 open 一个 issue，以便讨论您想要更改的内容。
## 📄 许可证
本项目基于 MIT License 授权。
标签：Supabase, 全栈框架, 团队协作, 实时通信, 测试用例, 自动化攻击, 运维监控