企业官网建设流程全解析

项目介绍 · 急救通 FirstAid QA

一、项目背景
在突发疾病、意外伤害和自然灾害面前，普通民众往往因为缺乏急救与应急知识而错失"黄金救援时间"。据统计，心脏骤停后的 4 分钟内实施有效心肺复苏，存活率可显著提高；烧烫伤后正确的"冲脱泡盖送"处理，能大幅减轻伤害。

急救通 FirstAid QA 正是为普及急救与应急知识而生：一个打开浏览器就能用的智能问答网站，让每个人都能在关键时刻快速查到正确的处置方法。

二、项目定位
维度 说明
项目类型 纯前端急救与应急知识科普问答网站
目标用户 普通大众、学生、家庭、安全培训人员
使用场景 日常学习急救知识、突发情况快速查询、安全教育培训
技术形态 HTML5 + CSS3 + 原生 JavaScript，零依赖、零构建
访问方式 浏览器直接打开 index.html 即可
三、核心功能

1. 🩺 急救知识分类
   覆盖 8 大急救主题，每类配有专属 emoji 图标卡片，点击即问： 心肺复苏（CPR/AED）、气道异物（海姆立克法）、止血包扎、烧烫伤、骨折固定、中风识别（FAST 法）、触电急救、中毒处理。

2. 🧍 身体部位急救
   按头部、眼睛、口腔、胸背部、四肢、手足等 8 个身体部位组织急救要点，方便按受伤位置快速检索。

3. 🚨 突发应急事件
   火灾逃生、溺水救援、地震避险、雷暴天气、动物咬伤、交通事故等 6 类公共应急事件指南。

4. 💬 AI 智能问答
   接入 AI 大模型（DeepSeek-V4-Flash，SSE 流式协议），回答逐字显示、自然流畅
   点击任意分类卡片自动发起提问，支持多轮上下文对话
   系统提示词约束 AI 以专业急救科普口吻分步骤回答，并提醒拨打紧急电话

5. 🛟 本地知识库兜底
   内置 12 条高频急救知识（CPR、海姆立克、烫伤、止血、骨折、中风、触电、中毒、溺水、火灾、地震、动物咬伤）。AI 服务不可用时自动降级匹配关键词作答，保证核心功能离线可用。

6. ⚠️ 安全提示贯穿
   页面顶部显著展示 120/119/110 紧急电话横幅；AI 回答持续强调"仅供参考，紧急情况请拨打急救电话"。

四、技术亮点
SSE 流式渲染：使用 fetch + ReadableStream 逐块解析 AI 返回，实现打字机效果
优雅降级：AI 接口失败时无缝切换本地知识库，不影响使用
现代 CSS：Grid 自适应卡片布局、渐变 Hero、悬停动效、媒体查询响应式
无障碍与交互：卡片支持 Tab 聚焦 + Enter 触发，键盘可完整操作
上下文管理：对话历史自动截断，控制 token 消耗
五、项目结构
first-aid-qa/
├── index.html # 页面骨架：三大分类导航 + AI 问答界面
├── style.css # 样式：渐变头部、卡片网格、聊天气泡、响应式
├── app.js # 分类数据渲染、AI 流式问答、本地知识库兜底
├── README.md # 项目说明文档
└── PROJECT.md # 本文档（项目介绍）

六、后续规划
增加急救知识自测小测验
增加更多应急场景（踩踏、山洪、中暑等）
支持语音输入提问
PWA 离线缓存，弱网环境可用
API 密钥迁移至后端代理，提升安全性
七、免责声明
本项目所有内容（含 AI 生成回答）仅供学习科普使用，不能替代专业医疗诊断与急救指导。遇到真实紧急情况，请立即拨打 120（急救）、119（火警）、110（报警），并以专业急救人员的指示为准。