Chukwuemerie-ezieke/school-incident-response-playbook-generator

# 校园应急响应手册生成器     ## 目录 - [概述](#overview) - [功能](#features) - [涵盖的事件类型](#incident-types-covered) - [工作原理](#how-it-works) - [技术栈](#tech-stack) - [快速开始](#getting-started) - [前置条件](#prerequisites) - [安装说明](#installation) - [开发](#development) - [生产构建](#production-build) - [部署](#deployment) - [GitHub Pages](#github-pages) - [其他平台](#other-platforms) - [项目结构](#project-structure) - [合规框架](#regulatory-framework) - [贡献](#contributing) - [许可证](#license) - [致谢](#credits) ## 概述 非洲的 K-12 学校越来越依赖数字系统——学生数据库、AI 驱动的学习工具、在线平台——但大多数学校缺乏记录在案的应急响应程序。当出现问题时，教职员工常常因为没有明确的规程而手忙脚乱。 该工具通过在几秒钟内生成一份**定制的、可打印的应急响应手册**来解决这一问题。教职员工只需填写其学校详细信息和具体事件，生成器便会生成： - 带有紧急标签的分阶段响应步骤 - NDPC（尼日利亚数据保护委员会）通知模板 - 致家长/监护人的沟通邮件 - 内部员工通知 - 证据保留清单 - 事后审查程序 **不会向任何服务器发送数据。**所有操作完全在浏览器中运行。 ## 功能 | 功能 | 描述 | |---------|-------------| | **4 种事件类型** | 数据泄露、有害 AI 输出、算法偏见/歧视、网络欺凌/在线安全 | | **NDPC 72 小时倒计时** | 根据发现时间戳自动计算合规通知截止日期 | | **个性化模板** | 预填您学校详细信息的家长邮件、员工通知和 NDPC 通知 | | **严重程度分级** | 低 / 中 / 高 / 严重 —— 调整每个响应步骤的紧迫性 | | **打印 / 保存为 PDF** | 一键生成针对实体记录优化排版的打印输出 | | **复制到剪贴板** | 立即复制任何沟通模板，以便在电子邮件或消息中使用 | | **事后检查清单** | 符合最佳实践的 8 步恢复和审查流程 | | **100% 客户端** | 无后端、无数据收集、无 cookie —— 首次加载后完全支持离线使用 | | **移动端响应式** | 支持手机、平板和桌面设备 | | **深色模式支持** | 遵循系统偏好设置 | | **Harmony Digital 品牌** | 为 Harmony Digital Consults Ltd 提供专业品牌展示 | ## 涵盖的事件类型 ### 1. 数据泄露 / 未经授权的披露 涵盖：账户被黑客攻击、设备丢失/被盗、内部人员失误、系统漏洞、第三方供应商违规。包括强制性的 NDPC 72 小时通知工作流。 ### 2. 有害 AI 输出 / AI 安全事件 涵盖：AI 工具在学校环境中生成暴力、色情、极端主义或误导性内容。包括 AI 工具暂停协议、安全防护升级和 ISO 42001 治理建议。 ### 3. 算法偏见 / 歧视事件 涵盖：在评分、内容过滤、学生安置或画像分析中由 AI 或系统驱动的偏见。包括 NDPA 2023 第 36 条规定的自动决策权、独立审计要求和纠正措施协议。 ### 4. 网络欺凌 / 在线安全事件 涵盖：学生骚扰、掠夺性接触、CSAM（儿童性虐待材料）、有害在线内容。包括安全防护优先响应、平台举报、警方转介标准和精神关怀支持清单。 ## 工作原理 ``` ┌─────────────────┐ ┌──────────────────┐ ┌────────────────────┐ │ Step 1 │ │ Step 2 │ │ Step 3 │ │ School Profile │ ──► │ Incident Details │ ──► │ Review & Generate │ │ │ │ │ │ │ │ - School name │ │ - Incident type │ │ - Confirm details │ │ - Principal │ │ - Severity │ │ - Generate │ │ - DPO │ │ - Description │ │ Playbook │ │ - Location │ │ - Data involved │ │ │ └─────────────────┘ └──────────────────┘ └────────────────────┘ │ ▼ ┌────────────────────┐ │ Generated Playbook │ │ │ │ 📋 Response Steps │ │ 📧 Email Templates │ │ ✅ Checklists │ │ 🖨️ Print / PDF │ └────────────────────┘ ``` ## 技术栈 | 技术 | 用途 | |-----------|---------| | **React 18** | UI 框架 | | **TypeScript** | 类型安全 | | **Vite** | 构建工具和开发服务器 | | **Tailwind CSS v3** | 实用优先的样式设计 | | **shadcn/ui** | 组件库（基于 Radix UI 基础组件） | | **Wouter** | 轻量级客户端路由（基于 hash） | | **Lucide React** | 图标库 | | **Plus Jakarta Sans** | 标题排版字体（Google Fonts） | | **DM Sans** | 正文字体（Google Fonts） | ## 快速开始 ### 前置条件 - **Node.js** >= 18.x - **npm** >= 9.x ### 安装说明 ``` # Clone repository git clone https://github.com/Chukwuemerie-ezieke/school-incident-response-playbook-generator.git cd school-incident-response-playbook-generator # 安装 dependencies npm install ``` ### 开发 ``` # 启动 development server npm run dev # 应用将在 http://localhost:5000 上可用 ``` 开发服务器支持热模块替换 (HMR) —— 对 React 组件的更改会立即显示，无需完全重新加载页面。 ### 生产构建 ``` # Build production 版本 npm run build # 输出位于 dist/public/ 中 ``` 构建会生成一个完全静态的网站（HTML + CSS + JS），且不依赖任何后端。 ## 部署 ### GitHub Pages 本仓库包含一个 GitHub Actions 工作流，它会在每次推送到 `main` 分支时自动构建并部署到 GitHub Pages。 **启用步骤：** 1. 进入您的仓库 **Settings** → **Pages** 2. 在 **Source** 下，选择 **GitHub Actions** 3. 推送到 `main` —— 剩下的工作由工作流处理 网站将上线于： ``` https://chukwuemerie-ezieke.github.io/school-incident-response-playbook-generator/ ``` ### 其他平台 生产构建 (`dist/public/`) 是一个静态网站，可以部署在任何地方： | 平台 | 命令 / 方法 | |----------|-----------------| | **Netlify** | 拖放 `dist/public/` 文件夹，或连接仓库 | | **Vercel** | 在项目根目录运行 `vercel --prod` | | **Cloudflare Pages** | 连接仓库，构建命令：`npm run build`，输出目录：`dist/public` | | **AWS S3** | 将 `dist/public/` 上传到启用了静态托管的 S3 存储桶 | | **任意 Web 服务器** | 将 `dist/public/` 的内容作为静态文件提供服务 | ## 项目结构 ``` school-incident-response-playbook-generator/ ├── .github/ │ └── workflows/ │ └── deploy.yml # GitHub Actions: build & deploy to Pages ├── client/ │ ├── index.html # HTML entry point │ └── src/ │ ├── App.tsx # Root component with routing │ ├── index.css # Global styles, design tokens, print CSS │ ├── main.tsx # React entry point │ ├── components/ │ │ └── ui/ # shadcn/ui components (Button, Card, etc.) │ ├── hooks/ │ │ ├── use-mobile.tsx # Mobile detection hook │ │ └── use-toast.ts # Toast notification hook │ ├── lib/ │ │ ├── playbook-generator.ts # Core playbook generation logic │ │ ├── queryClient.ts # TanStack Query client │ │ └── utils.ts # Utility functions │ └── pages/ │ ├── Home.tsx # Multi-step intake form │ ├── Playbook.tsx # Generated playbook display │ └── not-found.tsx # 404 page ├── shared/ │ └── schema.ts # TypeScript types and interfaces ├── server/ # Express server (dev only, not needed for static deploy) ├── package.json ├── tailwind.config.ts ├── tsconfig.json ├── vite.config.ts ├── CONTRIBUTING.md ├── LICENSE └── README.md ``` ### 关键文件 | 文件 | 描述 | |------|-------------| | `client/src/lib/playbook-generator.ts` | 包含所有手册内容逻辑——涵盖 4 种事件类型的响应步骤、沟通模板和检查清单 | | `client/src/pages/Home.tsx` | 带有验证功能的多步骤表单（学校概况 → 事件详情 → 审查并生成） | | `client/src/pages/Playbook.tsx` | 带有标签页的手册展示（响应步骤、沟通模板、事后处理） | | `shared/schema.ts` | `SchoolProfile`、`IncidentDetails` 和 `PlaybookData` 的 TypeScript 接口 | | `client/src/index.css` | 设计 token（海军蓝/琥珀色调色板）、Tailwind 配置和 `@media print` 样式 | ## 合规框架 本工具符合以下尼日利亚及国际框架的要求： | 框架 | 相关性 | |-----------|-----------| | **尼日利亚数据保护法 2023 (NDPA)** | 72 小时违规通知（第 40 条）、自动决策权（第 36 条）、儿童数据处理要求 | | **尼日利亚数据保护条例 2019 (NDPR)** | 遗留的数据保护框架——许多学校政策中仍在引用 | | **网络犯罪（禁止、预防等）法 2015** | 针对网络欺凌、黑客攻击和在线虐待的刑事转介标准 | | **儿童权利法 2003** | 处理学生数据和福利的学校的保护义务 | | **ISO/IEC 27001:2022** | 信息安全管理——事件响应、证据保留、恢复 | | **ISO/IEC 42001:2023** | AI 管理系统——AI 治理、缓解偏见、负责任地部署 AI | ## 许可证 本项目基于 **MIT License** 授权。详情请参阅 [LICENSE](LICENSE)。 ## 致谢 **开发者：** [Harmony Digital Consults Ltd](https://harmonydigitalconsults.com) 旨在帮助非洲 K-12 学校加强整个非洲大陆的数据保护和 AI 治理实践。

Harmony Digital Consults Ltd
NDPA 2023 · ISO 27001 · ISO 42001
在非洲建设更安全的数字校园

标签：ProjectDiscovery, React, Syscalls, TypeScript, 合规, 安全插件, 数据保护, 自动化攻击