diff --git a/src/family/main.tsx b/src/family/main.tsx
new file mode 100644
index 0000000..3d6a93b
--- /dev/null
+++ b/src/family/main.tsx
@@ -0,0 +1,241 @@
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { Dashboard } from './pages/Dashboard';
+import { MediaLibrary } from './pages/MediaLibrary';
+import { CarePlan } from './pages/CarePlan';
+import { AlertsAndCare } from './pages/AlertsAndCare';
+import { InteractionHistory } from './pages/InteractionHistory';
+import { FamilyMessages } from './pages/FamilyMessages';
+import { MoodHistory } from './pages/MoodHistory';
+import { ElderProfile } from './components/ElderProfile';
+import { EmergencyAlert } from './components/EmergencyAlert';
+import * as messageService from './services/messageService';
+import {
+  LayoutDashboard,
+  MessageSquare,
+  HeartPulse,
+  Bell,
+  MessageCircle,
+  Image,
+  Smile,
+} from 'lucide-react';
+import '../index.css';
+
+type Page = 'dashboard' | 'messages' | 'care' | 'alerts' | 'interaction' | 'media' | 'mood';
+
+/**
+ * 家属端应用
+ * 优化为手机浏览器使用 - 底部标签栏导航
+ */
+function FamilyApp() {
+  const [currentPage, setCurrentPage] = useState<Page>('dashboard');
+  const [showElderProfile, setShowElderProfile] = useState(false);
+  const [unhandledCount, setUnhandledCount] = useState(0);
+  const [emergencyAlert, setEmergencyAlert] = useState<{
+    id: number;
+    message: string;
+    timestamp: string;
+  } | null>(null);
+  const [shownEmergencyIds, setShownEmergencyIds] = useState<Set<number>>(new Set());
+  const familyId = 'family_001'; // 实际使用时从用户上下文获取
+
+  // 老人信息数据
+  const [elderInfo, setElderInfo] = useState({
+    name: '张奶奶',
+    age: 82,
+    cognitive_status: 'mild' as const,
+    hearing_vision: {
+      hearing: 'mild_loss' as const,
+      vision: 'ok' as const,
+    },
+    preferences: {
+      music: ['老歌', '评弹', '京剧'],
+      avoid_topics: ['医院', '去世的老伴'],
+    },
+  });
+
+  // 加载未处理通知数量
+  const loadUnhandledCount = async () => {
+    try {
+      const stats = await messageService.getAlertStats(familyId);
+      setUnhandledCount(stats.status_stats?.unhandled || 0);
+    } catch (error) {
+      console.error('加载未处理通知数量失败:', error);
+    }
+  };
+
+  // 检查是否有新的SOS紧急通知
+  const checkEmergencyAlerts = async () => {
+    try {
+      const { alerts } = await messageService.getFamilyAlerts(familyId, {
+        alert_type: 'sos_emergency',
+        handled: false,
+        limit: 1,
+      });
+
+      if (alerts.length > 0) {
+        const latestAlert = alerts[0];
+        // 只显示未展示过的紧急通知
+        if (!shownEmergencyIds.has(latestAlert.id)) {
+          setEmergencyAlert({
+            id: latestAlert.id,
+            message: latestAlert.message,
+            timestamp: new Date(latestAlert.created_at).toLocaleString('zh-CN', {
+              month: '2-digit',
+              day: '2-digit',
+              hour: '2-digit',
+              minute: '2-digit',
+            }),
+          });
+          // 记录已显示的通知ID
+          setShownEmergencyIds(prev => new Set(prev).add(latestAlert.id));
+        }
+      }
+    } catch (error) {
+      console.error('检查紧急通知失败:', error);
+    }
+  };
+
+  // 定时检查未处理通知和紧急通知
+  useEffect(() => {
+    loadUnhandledCount();
+    checkEmergencyAlerts();
+    // 每5秒检查一次
+    const interval = setInterval(() => {
+      loadUnhandledCount();
+      checkEmergencyAlerts();
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // 保存老人信息
+  const handleSaveElderInfo = (updatedInfo: any) => {
+    setElderInfo(updatedInfo);
+    // TODO: 这里可以添加API调用，将数据保存到后端
+    console.log('保存老人信息:', updatedInfo);
+  };
+
+  const navigation = [
+    { id: 'dashboard' as const, label: '概览', shortLabel: '概览', icon: LayoutDashboard },
+    { id: 'messages' as const, label: '家属留言', shortLabel: '留言', icon: MessageSquare },
+    { id: 'media' as const, label: '媒体库', shortLabel: '媒体', icon: Image },
+    { id: 'care' as const, label: '护理计划', shortLabel: '护理', icon: HeartPulse },
+    { id: 'alerts' as const, label: '通知', shortLabel: '通知', icon: Bell },
+    { id: 'interaction' as const, label: '交互记录', shortLabel: '交互', icon: MessageCircle },
+  ];
+
+  const renderPage = () => {
+    switch (currentPage) {
+      case 'dashboard':
+        return <Dashboard onNavigate={setCurrentPage} />;
+      case 'messages':
+        return <FamilyMessages />;
+      case 'media':
+        return <MediaLibrary />;
+      case 'mood':
+        return <MoodHistory />;
+      case 'care':
+        return <CarePlan />;
+      case 'alerts':
+        return <AlertsAndCare />;
+      case 'interaction':
+        return <InteractionHistory />;
+      default:
+        return <Dashboard onNavigate={setCurrentPage} />;
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen bg-gray-50">
+      {/* 顶部标题栏 - 手机优化 */}
+      <div className="bg-white border-b px-4 py-3 flex items-center justify-between flex-shrink-0 safe-area-top">
+        <div>
+          <div className="flex items-baseline gap-2">
+            <h1 className="text-lg font-bold text-primary-600">KinEcho</h1>
+            <span className="text-xs text-gray-500 font-medium">亲情回声</span>
+          </div>
+          <p className="text-xs text-gray-400 italic mt-0.5">
+            Bring family moments to life. / 把家人的声音带到眼前。
+          </p>
+        </div>
+        <button
+          onClick={() => setShowElderProfile(true)}
+          className="px-3 py-1.5 bg-primary-50 hover:bg-primary-100 rounded-full transition-colors flex items-center gap-2"
+        >
+          <span className="text-primary-700 text-sm font-bold">
+            {elderInfo.name}
+          </span>
+        </button>
+      </div>
+
+      {/* 主要内容区 - 可滚动 */}
+      <div className="flex-1 overflow-y-auto pb-safe">{renderPage()}</div>
+
+      {/* 底部标签栏导航 - 手机原生风格 */}
+      <nav className="bg-white border-t flex items-center justify-around flex-shrink-0 safe-area-bottom">
+        {navigation.map((item) => {
+          const Icon = item.icon;
+          const isActive = currentPage === item.id;
+          const showBadge = item.id === 'alerts' && unhandledCount > 0;
+          return (
+            <button
+              key={item.id}
+              onClick={() => setCurrentPage(item.id)}
+              className={`
+                flex-1 flex flex-col items-center justify-center py-2 px-1 transition-colors
+                ${isActive ? 'text-primary-600' : 'text-gray-500'}
+              `}
+            >
+              <div className="relative">
+                <Icon
+                  size={24}
+                  strokeWidth={isActive ? 2.5 : 2}
+                  className="mb-1"
+                />
+                {showBadge && (
+                  <span className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-red-500 rounded-full animate-pulse" />
+                )}
+              </div>
+              <span className={`text-xs ${isActive ? 'font-semibold' : 'font-normal'}`}>
+                {item.shortLabel}
+              </span>
+            </button>
+          );
+        })}
+      </nav>
+
+      {/* 老人信息弹窗 */}
+      {showElderProfile && (
+        <ElderProfile
+          elderInfo={elderInfo}
+          onClose={() => setShowElderProfile(false)}
+          onSave={handleSaveElderInfo}
+        />
+      )}
+
+      {/* 紧急通知弹窗 */}
+      {emergencyAlert && (
+        <EmergencyAlert
+          message={emergencyAlert.message}
+          timestamp={emergencyAlert.timestamp}
+          onHandle={async () => {
+            // 标记为已处理
+            await messageService.handleAlert(emergencyAlert.id);
+            // 关闭弹窗
+            setEmergencyAlert(null);
+            // 跳转到通知页面
+            setCurrentPage('alerts');
+            // 刷新未处理数量
+            loadUnhandledCount();
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <FamilyApp />
+  </React.StrictMode>
+);