diff --git a/static/app.js b/static/app.js
index 70eb3c0..0b2d2ee 100644
--- a/static/app.js
+++ b/static/app.js
@@ -305,5 +305,115 @@ async function loadRecent() {
     }
 }
 
+// ========== 历史记录面板 ==========
+
+const historyOverlay = document.getElementById('history-overlay');
+const historyList = document.getElementById('history-list');
+
+// 打开历史面板
+document.getElementById('view-all').addEventListener('click', () => {
+    historyOverlay.classList.add('active');
+    loadHistory();
+});
+
+// 关闭历史面板
+document.getElementById('close-history').addEventListener('click', () => {
+    historyOverlay.classList.remove('active');
+});
+
+// 点击遮罩关闭
+historyOverlay.addEventListener('click', (e) => {
+    if (e.target === historyOverlay) {
+        historyOverlay.classList.remove('active');
+    }
+});
+
+async function loadHistory() {
+    try {
+        const res = await fetch(`${API_BASE}/api/din?limit=100`);
+        const records = await res.json();
+        
+        if (records.length === 0) {
+            historyList.innerHTML = '<div style="text-align:center;color:#666;padding:40px;">暂无记录</div>';
+            return;
+        }
+        
+        // 按日期分组
+        const grouped = groupByDate(records);
+        
+        historyList.innerHTML = Object.entries(grouped).map(([date, items]) => `
+            <div class="history-group">
+                <div class="history-date-header">${date}</div>
+                ${items.map(r => `
+                    <div class="history-item" data-id="${r.id}">
+                        <span class="history-time">${formatTimeOnly(r.created_at)}</span>
+                        <span class="history-content ${!r.content ? 'empty' : ''}">${r.content || '(未备注)'}</span>
+                        <div class="history-actions">
+                            <button onclick="editHistoryItem(${r.id}, '${escapeHtml(r.content || '')}')" title="编辑">✏️</button>
+                            <button class="btn-delete" onclick="deleteHistoryItem(${r.id})" title="删除">🗑️</button>
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+        `).join('');
+    } catch (err) {
+        console.error('加载历史失败:', err);
+        showToast('加载失败', false);
+    }
+}
+
+function groupByDate(records) {
+    const groups = {};
+    records.forEach(r => {
+        const date = new Date(r.created_at);
+        const key = `${date.getMonth() + 1}月${date.getDate()}日`;
+        if (!groups[key]) groups[key] = [];
+        groups[key].push(r);
+    });
+    return groups;
+}
+
+// 编辑历史记录
+window.editHistoryItem = async function(id, currentContent) {
+    const newContent = prompt('修改备注:', currentContent);
+    if (newContent === null) return;
+    
+    try {
+        await fetch(`${API_BASE}/api/din/${id}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ content: newContent.trim() })
+        });
+        
+        showToast('已更新');
+        loadHistory(); // 刷新历史列表
+        loadRecent();  // 刷新最近列表
+    } catch (err) {
+        showToast('更新失败', false);
+    }
+};
+
+// 删除历史记录
+window.deleteHistoryItem = async function(id) {
+    if (!confirm('确定删除这条记录？')) return;
+    
+    try {
+        await fetch(`${API_BASE}/api/din/${id}`, { method: 'DELETE' });
+        
+        showToast('已删除');
+        loadHistory();    // 刷新历史列表
+        loadRecent();     // 刷新最近列表
+        updateStats();    // 刷新统计
+    } catch (err) {
+        showToast('删除失败', false);
+    }
+};
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML.replace(/'/g, "&#39;").replace(/"/g, "&quot;");
+}
+
 // 启动
 init();
diff --git a/static/index.html b/static/index.html
index 117899a..7836f47 100644
--- a/static/index.html
+++ b/static/index.html
@@ -50,7 +50,7 @@
     <div class="recent-panel" id="recent-panel">
         <div class="recent-title">
             <span>最近记录</span>
-            <span class="recent-count" id="recent-count">0</span>
+            <span class="view-all" id="view-all">查看全部 →</span>
         </div>
         <div class="recent-list" id="recent-list">
             <div class="recent-item">
@@ -59,6 +59,19 @@
         </div>
     </div>
 
+    <!-- 历史记录面板（全屏） -->
+    <div class="history-overlay" id="history-overlay">
+        <div class="history-panel">
+            <div class="history-header">
+                <h2>历史记录</h2>
+                <button class="close-btn" id="close-history">✕</button>
+            </div>
+            <div class="history-list" id="history-list">
+                <!-- 动态加载 -->
+            </div>
+        </div>
+    </div>
+
     <!-- 快速输入面板 -->
     <div class="input-overlay" id="input-overlay">
         <div class="input-panel">
diff --git a/static/style.css b/static/style.css
index 9efb778..697b770 100644
--- a/static/style.css
+++ b/static/style.css
@@ -324,7 +324,186 @@ body {
     font-style: italic;
 }
 
+.view-all {
+    font-size: 0.8rem;
+    color: #ff4757;
+    cursor: pointer;
+    transition: opacity 0.2s;
+}
+
+.view-all:hover {
+    opacity: 0.8;
+}
+
+/* 历史记录面板 */
+.history-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.9);
+    backdrop-filter: blur(20px);
+    z-index: 150;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.history-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.history-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.history-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+
+.history-header h2 {
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+.close-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255,255,255,0.1);
+    color: #fff;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.close-btn:hover {
+    background: rgba(255,255,255,0.15);
+}
+
+.history-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.history-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background: rgba(255,255,255,0.05);
+    border-radius: 16px;
+    transition: all 0.2s;
+}
+
+.history-item:hover {
+    background: rgba(255,255,255,0.08);
+}
+
+.history-date {
+    font-size: 0.7rem;
+    color: #666;
+    min-width: 60px;
+    text-align: center;
+}
+
+.history-date .day {
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: #fff;
+    display: block;
+}
+
+.history-date .month {
+    font-size: 0.6rem;
+    text-transform: uppercase;
+}
+
+.history-time {
+    font-size: 0.75rem;
+    color: #888;
+    min-width: 50px;
+    font-family: 'SF Mono', monospace;
+}
+
+.history-content {
+    flex: 1;
+    font-size: 0.95rem;
+    color: #ddd;
+    word-break: break-all;
+}
+
+.history-content.empty {
+    color: #555;
+    font-style: italic;
+}
+
+.history-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.history-actions button {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255,255,255,0.1);
+    color: #888;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.history-actions button:hover {
+    background: rgba(255,255,255,0.15);
+    color: #fff;
+}
+
+.history-actions .btn-delete:hover {
+    background: #ff4757;
+    color: #fff;
+}
+
+/* 历史记录分组 */
+.history-group {
+    margin-bottom: 24px;
+}
+
+.history-date-header {
+    font-size: 0.8rem;
+    color: #666;
+    padding: 8px 0;
+    margin-bottom: 8px;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
 /* Toast */
+.toast {
 .toast {
     position: fixed;
     top: 50%;