Add File

src/elderly/components/EmergencySheet.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Phone, AlertCircle } from 'lucide-react';
+
+interface EmergencySheetProps {
+  onContactFamily?: () => void;
+  onContactEmergency?: () => void;
+  onClose?: () => void;
+}
+
+/**
+ * 紧急联络组件
+ * 可通过底栏按钮或三击电源键唤起
+ */
+export const EmergencySheet: React.FC<EmergencySheetProps> = ({
+  onContactFamily,
+  onContactEmergency,
+  onClose,
+}) => {
+  return (
+    <div className="fixed inset-0 bg-red-900 bg-opacity-95 flex items-center justify-center z-50 animate-fade-in p-6">
+      <div className="max-w-2xl w-full space-y-8">
+        {/* 标题 */}
+        <div className="text-center space-y-4">
+          <div className="flex justify-center">
+            <AlertCircle size={80} className="text-white animate-pulse" />
+          </div>
+          <h2 className="text-elderly-2xl font-bold text-white">
+            需要帮助吗？
+          </h2>
+          <p className="text-elderly-lg text-red-100">
+            别担心，我在这里陪着您
+          </p>
+        </div>
+
+        {/* 主要操作按钮 */}
+        <div className="space-y-6">
+          <button
+            onClick={onContactFamily}
+            className="w-full btn-elderly bg-white hover:bg-gray-100 text-red-600 flex items-center justify-center gap-4 py-8"
+          >
+            <Phone size={48} />
+            <span className="text-elderly-xl">联系家人</span>
+          </button>
+
+          <button
+            onClick={onContactEmergency}
+            className="w-full btn-elderly bg-red-600 hover:bg-red-700 text-white flex items-center justify-center gap-4 py-8 ring-4 ring-white"
+          >
+            <AlertCircle size={48} />
+            <span className="text-elderly-xl">联系急救 120</span>
+          </button>
+        </div>
+
+        {/* 取消按钮 */}
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="w-full btn-elderly bg-gray-700 bg-opacity-50 hover:bg-opacity-70 text-white"
+          >
+            我没事，返回
+          </button>
+        )}
+
+        {/* 安抚文案 */}
+        <div className="text-center">
+          <p className="text-elderly-base text-red-100 leading-relaxed-plus">
+            如果您感到不舒服，请不要犹豫
+            <br />
+            让家人或医生来帮助您
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};