diff --git a/src/family/pages/InteractionHistory.tsx b/src/family/pages/InteractionHistory.tsx
new file mode 100644
index 0000000..a082807
--- /dev/null
+++ b/src/family/pages/InteractionHistory.tsx
@@ -0,0 +1,258 @@
+import React, { useState, useEffect } from 'react';
+import { Bot, User, RefreshCw } from 'lucide-react';
+
+/**
+ * 聊天记录页面
+ * 展示老人与数字人的聊天对话内容
+ */
+
+interface ChatMessage {
+  username: string;
+  is_adopted: number;
+  type: 'fay' | 'member';
+  way: string;
+  content: string;
+  createtime: number;
+  timetext: string;
+}
+
+const API_BASE_URL = 'http://127.0.0.1:5000';
+
+export const InteractionHistory: React.FC = () => {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const username = 'User'; // 实际使用时从用户上下文获取
+
+  // 加载聊天记录
+  const loadChatHistory = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch(`${API_BASE_URL}/api/get-msg`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, limit: 100 }),
+      });
+
+      if (!response.ok) {
+        throw new Error('获取聊天记录失败');
+      }
+
+      const data = await response.json();
+      // 按时间倒序排列，最新的在前面
+      const sortedMessages = (data.list || []).sort(
+        (a: ChatMessage, b: ChatMessage) => b.createtime - a.createtime
+      );
+      setMessages(sortedMessages);
+    } catch (err) {
+      console.error('加载聊天记录失败:', err);
+      setError('无法连接到数字人服务');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadChatHistory();
+    // 每30秒刷新一次
+    const interval = setInterval(loadChatHistory, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // 格式化时间戳
+  const formatTime = (timestamp: number) => {
+    const date = new Date(timestamp * 1000);
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+
+    const timeStr = date.toLocaleTimeString('zh-CN', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+
+    if (isToday) {
+      return timeStr;
+    }
+
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    if (date.toDateString() === yesterday.toDateString()) {
+      return `昨天 ${timeStr}`;
+    }
+
+    return date.toLocaleDateString('zh-CN', {
+      month: '2-digit',
+      day: '2-digit',
+    }) + ' ' + timeStr;
+  };
+
+  // 按日期分组消息
+  const groupMessagesByDate = (msgs: ChatMessage[]) => {
+    const groups: { [key: string]: ChatMessage[] } = {};
+
+    msgs.forEach(msg => {
+      const date = new Date(msg.createtime * 1000);
+      const now = new Date();
+      const isToday = date.toDateString() === now.toDateString();
+
+      const yesterday = new Date(now);
+      yesterday.setDate(yesterday.getDate() - 1);
+      const isYesterday = date.toDateString() === yesterday.toDateString();
+
+      let dateKey: string;
+      if (isToday) {
+        dateKey = '今天';
+      } else if (isYesterday) {
+        dateKey = '昨天';
+      } else {
+        dateKey = date.toLocaleDateString('zh-CN', {
+          month: '2-digit',
+          day: '2-digit',
+        });
+      }
+
+      if (!groups[dateKey]) {
+        groups[dateKey] = [];
+      }
+      groups[dateKey].push(msg);
+    });
+
+    return groups;
+  };
+
+  const groupedMessages = groupMessagesByDate(messages);
+
+  // 显示加载状态
+  if (loading && messages.length === 0) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">正在加载聊天记录...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="px-4 py-4">
+        {/* 顶部标题和刷新按钮 */}
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-bold text-gray-900">聊天记录</h2>
+          <button
+            onClick={loadChatHistory}
+            disabled={loading}
+            className="flex items-center gap-1 px-3 py-1.5 text-sm text-primary-600 hover:bg-primary-50 rounded-lg transition-colors disabled:opacity-50"
+          >
+            <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
+            刷新
+          </button>
+        </div>
+
+        {/* 统计卡片 */}
+        <div className="grid grid-cols-2 gap-3 mb-4">
+          <div className="card p-3 text-center">
+            <div className="text-2xl font-bold text-primary-600">{messages.length}</div>
+            <div className="text-xs text-gray-600 mt-1">消息总数</div>
+          </div>
+          <div className="card p-3 text-center">
+            <div className="text-2xl font-bold text-green-600">
+              {messages.filter(m => m.type === 'member').length}
+            </div>
+            <div className="text-xs text-gray-600 mt-1">老人发言</div>
+          </div>
+        </div>
+
+        {/* 错误提示 */}
+        {error && (
+          <div className="mb-4 p-4 bg-yellow-50 border-l-4 border-yellow-400 rounded-lg">
+            <p className="text-sm text-yellow-800">{error}</p>
+          </div>
+        )}
+
+        {/* 聊天记录列表 */}
+        {Object.keys(groupedMessages).length > 0 ? (
+          Object.entries(groupedMessages).map(([dateKey, msgs]) => (
+            <div key={dateKey} className="mb-6">
+              {/* 日期分隔 */}
+              <div className="flex items-center justify-center mb-4">
+                <span className="px-3 py-1 bg-gray-200 text-gray-600 text-xs rounded-full">
+                  {dateKey}
+                </span>
+              </div>
+
+              {/* 消息列表 - 按时间正序显示 */}
+              <div className="space-y-3">
+                {[...msgs].reverse().map((msg, index) => (
+                  <div
+                    key={`${msg.createtime}-${index}`}
+                    className={`flex gap-2 ${
+                      msg.type === 'member' ? 'flex-row-reverse' : ''
+                    }`}
+                  >
+                    {/* 头像 */}
+                    <div
+                      className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                        msg.type === 'fay'
+                          ? 'bg-primary-100'
+                          : 'bg-green-100'
+                      }`}
+                    >
+                      {msg.type === 'fay' ? (
+                        <Bot size={20} className="text-primary-600" />
+                      ) : (
+                        <User size={20} className="text-green-600" />
+                      )}
+                    </div>
+
+                    {/* 消息气泡 */}
+                    <div
+                      className={`flex-1 ${
+                        msg.type === 'member' ? 'flex flex-col items-end' : ''
+                      }`}
+                    >
+                      <div
+                        className={`inline-block max-w-[80%] rounded-2xl px-4 py-2.5 ${
+                          msg.type === 'fay'
+                            ? 'bg-white border border-gray-200 shadow-sm'
+                            : 'bg-primary-600 text-white shadow-sm'
+                        }`}
+                      >
+                        <p
+                          className={`text-sm leading-relaxed ${
+                            msg.type === 'fay' ? 'text-gray-800' : 'text-white'
+                          }`}
+                        >
+                          {msg.content}
+                        </p>
+                      </div>
+                      <div
+                        className={`flex items-center gap-1 mt-1 px-2 ${
+                          msg.type === 'member' ? 'justify-end' : ''
+                        }`}
+                      >
+                        <span className="text-xs text-gray-400">
+                          {formatTime(msg.createtime)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className="text-center py-12">
+            <Bot size={48} className="mx-auto text-gray-300 mb-3" />
+            <p className="text-gray-500">暂无聊天记录</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};