From 57fa27c616d23fd58e92a7312203887c2e87ea73 Mon Sep 17 00:00:00 2001
From: flying-hero <462087392@qq.com>
Date: Wed, 1 Apr 2026 22:36:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=AE=B0=E5=BF=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20-=20=E6=97=A5=E8=AE=B0=E6=9F=A5=E7=9C=8B?=
 =?UTF-8?q?=E5=99=A8=E5=92=8C=E6=97=A5=E5=8E=86=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 后端 API: 获取日记日期列表和详情
- 前端组件：记忆弹窗、日历组件
- 点击记忆按钮查看龙虾工作日记
- 日历高亮显示有日记的日期
---
 code/backend/api/urls.py                      |   2 +
 code/backend/api/views.py                     |  48 +++
 code/frontend/public/index.html               | 313 ++++++++++++++++-
 .../src/components/MemoryModal/index.js       | 318 ++++++++++++++++++
 4 files changed, 673 insertions(+), 8 deletions(-)
 create mode 100644 code/frontend/src/components/MemoryModal/index.js

diff --git a/code/backend/api/urls.py b/code/backend/api/urls.py
index 3446a04..1079ca1 100644
--- a/code/backend/api/urls.py
+++ b/code/backend/api/urls.py
@@ -8,5 +8,7 @@ urlpatterns = [
     path('lobsters/', views.lobster_list, name='lobster-list'),
     path('lobsters/<int:lobster_id>/', views.lobster_detail, name='lobster-detail'),
     path('lobsters/<int:lobster_id>/memory/', views.lobster_memory, name='lobster-memory'),
+    path('lobsters/<int:lobster_id>/memory/dates/', views.lobster_memory_dates, name='lobster-memory-dates'),
+    path('lobsters/<int:lobster_id>/memory/<str:date>/', views.lobster_memory_detail, name='lobster-memory-detail'),
     path('tools/', views.tools_list, name='tools-list'),
 ]
diff --git a/code/backend/api/views.py b/code/backend/api/views.py
index 926956b..db0a35a 100644
--- a/code/backend/api/views.py
+++ b/code/backend/api/views.py
@@ -5,6 +5,8 @@ from rest_framework.decorators import api_view
 from rest_framework.response import Response
 from datetime import datetime
 import os
+from pathlib import Path
+import re
 
 # 龙虾配置
 LOBSTERS = [
@@ -65,3 +67,49 @@ def tools_list(request):
         }
     ]
     return Response(tools)
+
+@api_view(['GET'])
+def lobster_memory_dates(request, lobster_id):
+    """获取龙虾有日记的日期列表"""
+    # 获取龙虾工作区
+    lobster_map = {
+        1: 'flying-hero',
+        2: 'daotong',
+        3: 'coder',
+        4: 'web',
+        5: 'physics',
+        6: 'watcher',
+    }
+    
+    lobster_name = lobster_map.get(lobster_id)
+    if not lobster_name:
+        return Response({'error': '龙虾不存在'}, status=404)
+    
+    # 记忆文件目录
+    memory_dir = Path(f'/home/node/.openclaw/workspace/flying-hero/memory')
+    
+    # 获取所有日记文件
+    dates = []
+    if memory_dir.exists():
+        for file in memory_dir.glob('*.md'):
+            # 提取日期 (YYYY-MM-DD.md)
+            match = re.match(r'(\d{4}-\d{2}-\d{2})\.md', file.name)
+            if match:
+                dates.append(match.group(1))
+    
+    dates.sort(reverse=True)
+    return Response({'dates': dates})
+
+@api_view(['GET'])
+def lobster_memory_detail(request, lobster_id, date):
+    """获取指定日期的日记内容"""
+    memory_file = Path(f'/home/node/.openclaw/workspace/flying-hero/memory/{date}.md')
+    
+    if not memory_file.exists():
+        return Response({'error': '该日期没有日记'}, status=404)
+    
+    content = memory_file.read_text(encoding='utf-8')
+    return Response({
+        'date': date,
+        'content': content
+    })
diff --git a/code/frontend/public/index.html b/code/frontend/public/index.html
index bee7e42..6b8ca3a 100644
--- a/code/frontend/public/index.html
+++ b/code/frontend/public/index.html
@@ -141,17 +141,314 @@
   <script>
     // 龙虾配置
     const lobsters = [
-      { name: '飞行侠', emoji: '🦸', port: 18789, specialty: '主力/通用' },
-      { name: '道童', emoji: '☯️', port: 18889, specialty: '道德经注解' },
-      { name: '墨子', emoji: '🔧', port: 18689, specialty: '代码专家' },
-      { name: '织网者', emoji: '🕸️', port: 18589, specialty: '网站制作' },
-      { name: '费曼', emoji: '⚛️', port: 18989, specialty: '物理研究' },
-      { name: '守望者', emoji: '👁️', port: 18080, specialty: '舰队监控' },
+      { id: 1, name: '飞行侠', emoji: '🦸', port: 18789, specialty: '主力/通用' },
+      { id: 2, name: '道童', emoji: '☯️', port: 18889, specialty: '道德经注解' },
+      { id: 3, name: '墨子', emoji: '🔧', port: 18689, specialty: '代码专家' },
+      { id: 4, name: '织网者', emoji: '🕸️', port: 18589, specialty: '网站制作' },
+      { id: 5, name: '费曼', emoji: '⚛️', port: 18989, specialty: '物理研究' },
+      { id: 6, name: '守望者', emoji: '👁️', port: 18080, specialty: '舰队监控' },
     ];
     
+    // 当前打开的记忆弹窗
+    let currentMemoryModal = null;
+    
+    // 打开记忆弹窗
+    function openMemory(lobster) {
+      if (currentMemoryModal) {
+        currentMemoryModal.remove();
+      }
+      
+      const modal = document.createElement('div');
+      modal.className = 'memory-modal-container';
+      document.body.appendChild(modal);
+      
+      // 加载记忆组件
+      loadMemoryComponent(lobster, modal);
+    }
+    
+    async function loadMemoryComponent(lobster, container) {
+      try {
+        // 获取有日记的日期
+        const datesResp = await fetch(`http://localhost:8000/api/lobsters/${lobster.id}/memory/dates/`);
+        const datesData = await datesResp.json();
+        const dates = datesData.dates || [];
+        
+        // 默认显示最新日记
+        let selectedDate = dates.length > 0 ? dates[0] : '';
+        let content = '这一天还没有日记';
+        
+        if (selectedDate) {
+          const contentResp = await fetch(`http://localhost:8000/api/lobsters/${lobster.id}/memory/${selectedDate}/`);
+          const contentData = await contentResp.json();
+          content = contentData.content || '日记内容为空';
+        }
+        
+        renderMemoryModal(lobster, dates, selectedDate, content, container);
+      } catch (error) {
+        container.innerHTML = `<div class="memory-error">加载失败：${error.message}</div>`;
+      }
+    }
+    
+    function renderMemoryModal(lobster, dates, selectedDate, content, container) {
+      const today = new Date();
+      const year = today.getFullYear();
+      const month = today.getMonth();
+      
+      container.innerHTML = `
+        <div class="memory-overlay" onclick="closeMemory()">
+          <div class="memory-dialog" onclick="event.stopPropagation()">
+            <div class="memory-header">
+              <h2>📔 ${lobster.emoji} ${lobster.name} - 工作日记</h2>
+              <button class="memory-close" onclick="closeMemory()">×</button>
+            </div>
+            
+            <div class="memory-body">
+              <div class="memory-content-area">
+                ${content ? `
+                  <div class="memory-date-title">📅 ${selectedDate}</div>
+                  <pre>${escapeHtml(content)}</pre>
+                ` : '<div class="memory-empty">这一天还没有日记</div>'}
+              </div>
+              
+              <div class="memory-calendar">
+                <div class="calendar-nav">
+                  <button onclick="changeMonth(-1)">◀</button>
+                  <span>${year}年 ${month + 1}月</span>
+                  <button onclick="changeMonth(1)">▶</button>
+                </div>
+                <div class="calendar-grid">
+                  ${['日', '一', '二', '三', '四', '五', '六'].map(d => `<div class="cal-weekday">${d}</div>`).join('')}
+                  ${renderCalendarDays(year, month, dates, selectedDate, lobster.id)}
+                </div>
+                <div class="calendar-legend">
+                  <span class="legend-item"><span class="legend-dot has-memory"></span>有日记</span>
+                  <span class="legend-item"><span class="legend-dot no-memory"></span>无日记</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <style>
+          .memory-overlay {
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(0,0,0,0.7);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+          }
+          .memory-dialog {
+            background: white;
+            border-radius: 16px;
+            width: 90%;
+            max-width: 1000px;
+            max-height: 90vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+          }
+          .memory-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px;
+            border-bottom: 1px solid #e2e8f0;
+          }
+          .memory-header h2 {
+            color: #1a365d;
+            margin: 0;
+          }
+          .memory-close {
+            background: none;
+            border: none;
+            font-size: 2em;
+            cursor: pointer;
+            color: #718096;
+          }
+          .memory-body {
+            display: grid;
+            grid-template-columns: 1fr 350px;
+            gap: 20px;
+            padding: 20px;
+            overflow: hidden;
+          }
+          .memory-content-area {
+            background: #f7fafc;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            padding: 20px;
+            overflow-y: auto;
+            max-height: 600px;
+          }
+          .memory-date-title {
+            color: #553c9a;
+            margin-bottom: 15px;
+            font-size: 1.2em;
+          }
+          .memory-content-area pre {
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9em;
+            color: #2d3748;
+            line-height: 1.6;
+          }
+          .memory-empty {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: #a0aec0;
+          }
+          .memory-calendar {
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            padding: 15px;
+            background: white;
+          }
+          .calendar-nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+          }
+          .calendar-nav button {
+            background: #4299e1;
+            color: white;
+            border: none;
+            padding: 5px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+          }
+          .calendar-grid {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            gap: 4px;
+          }
+          .cal-weekday {
+            text-align: center;
+            font-size: 0.8em;
+            color: #718096;
+            padding: 8px 0;
+          }
+          .cal-day {
+            aspect-ratio: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+            font-size: 0.9em;
+            cursor: pointer;
+          }
+          .cal-day:hover:not(.empty) {
+            background: #e2e8f0;
+          }
+          .cal-day.has-memory {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            font-weight: bold;
+          }
+          .cal-day.selected {
+            border: 2px solid #ed8936;
+          }
+          .calendar-legend {
+            margin-top: 15px;
+            display: flex;
+            gap: 15px;
+            font-size: 0.85em;
+          }
+          .legend-dot {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 5px;
+          }
+          .legend-dot.has-memory {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          }
+          .legend-dot.no-memory {
+            background: #e2e8f0;
+          }
+          .memory-error {
+            padding: 20px;
+            color: #f56565;
+          }
+          @media (max-width: 768px) {
+            .memory-body {
+              grid-template-columns: 1fr;
+            }
+            .memory-calendar {
+              order: -1;
+            }
+          }
+        </style>
+      `;
+      
+      currentMemoryModal = container;
+    }
+    
+    function renderCalendarDays(year, month, dates, selectedDate, lobsterId) {
+      const firstDay = new Date(year, month, 1);
+      const lastDay = new Date(year, month + 1, 0);
+      const daysInMonth = lastDay.getDate();
+      const startWeekday = firstDay.getDay();
+      
+      let html = '';
+      
+      // 空白
+      for (let i = 0; i < startWeekday; i++) {
+        html += '<div class="cal-day empty"></div>';
+      }
+      
+      // 日期
+      for (let day = 1; day <= daysInMonth; day++) {
+        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        const hasMemory = dates.includes(dateStr);
+        const isSelected = selectedDate === dateStr;
+        
+        html += `<div class="cal-day ${hasMemory ? 'has-memory' : ''} ${isSelected ? 'selected' : ''}" 
+                   onclick="selectDate('${dateStr}', ${lobsterId})">${day}</div>`;
+      }
+      
+      return html;
+    }
+    
+    function selectDate(date, lobsterId) {
+      // 重新加载选中日期的日记
+      const lobster = lobsters.find(l => l.id === lobsterId);
+      if (lobster && currentMemoryModal) {
+        currentMemoryModal.innerHTML = '';
+        loadMemoryComponent(lobster, currentMemoryModal);
+      }
+    }
+    
+    function changeMonth(delta) {
+      // 简化：刷新页面重新计算月份
+      location.reload();
+    }
+    
+    function closeMemory() {
+      if (currentMemoryModal) {
+        currentMemoryModal.remove();
+        currentMemoryModal = null;
+      }
+    }
+    
+    function escapeHtml(text) {
+      if (!text) return '';
+      return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    }
+    
     // 渲染龙虾卡片
     function renderLobsterCard(lobster) {
-      const status = 'healthy'; // 暂时都显示健康
+      const status = 'healthy';
       const statusClass = status === 'healthy' ? 'status-healthy' : 'status-error';
       const statusText = status === 'healthy' ? '健康' : '异常';
       
@@ -178,7 +475,7 @@
             </div>
           </div>
           <div class="lobster-actions">
-            <button class="action-btn btn-memory" onclick="alert('记忆功能开发中...')">🧠 记忆</button>
+            <button class="action-btn btn-memory" onclick="openMemory(lobsters.find(l => l.id === ${lobster.id}))">🧠 记忆</button>
           </div>
         </div>
       `;
diff --git a/code/frontend/src/components/MemoryModal/index.js b/code/frontend/src/components/MemoryModal/index.js
new file mode 100644
index 0000000..586e135
--- /dev/null
+++ b/code/frontend/src/components/MemoryModal/index.js
@@ -0,0 +1,318 @@
+import React, { useState, useEffect } from 'react';
+
+const API_BASE = 'http://localhost:8000/api';
+
+function MemoryModal({ lobsterId, lobsterName, onClose }) {
+  const [dates, setDates] = useState([]);
+  const [selectedDate, setSelectedDate] = useState('');
+  const [content, setContent] = useState('');
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+
+  // 加载有日记的日期
+  useEffect(() => {
+    fetch(`${API_BASE}/lobsters/${lobsterId}/memory/dates/`)
+      .then(r => r.json())
+      .then(data => {
+        setDates(data.dates);
+        if (data.dates.length > 0) {
+          setSelectedDate(data.dates[0]);
+        }
+      });
+  }, [lobsterId]);
+
+  // 加载选中日期的日记
+  useEffect(() => {
+    if (selectedDate) {
+      fetch(`${API_BASE}/lobsters/${lobsterId}/memory/${selectedDate}/`)
+        .then(r => r.json())
+        .then(data => {
+          if (data.content) {
+            setContent(data.content);
+          }
+        });
+    }
+  }, [selectedDate, lobsterId]);
+
+  // 渲染日历
+  const renderCalendar = () => {
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const daysInMonth = lastDay.getDate();
+    const startWeekday = firstDay.getDay();
+
+    const days = [];
+    
+    // 空白格子
+    for (let i = 0; i < startWeekday; i++) {
+      days.push(<div key={`empty-${i}`} className="calendar-day empty"></div>);
+    }
+
+    // 日期格子
+    for (let day = 1; day <= daysInMonth; day++) {
+      const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+      const hasMemory = dates.includes(dateStr);
+      const isSelected = selectedDate === dateStr;
+
+      days.push(
+        <div
+          key={day}
+          className={`calendar-day ${hasMemory ? 'has-memory' : ''} ${isSelected ? 'selected' : ''}`}
+          onClick={() => hasMemory && setSelectedDate(dateStr)}
+        >
+          {day}
+        </div>
+      );
+    }
+
+    return days;
+  };
+
+  const changeMonth = (delta) => {
+    setCurrentMonth(new Date(currentMonth.setMonth(currentMonth.getMonth() + delta)));
+  };
+
+  return (
+    <div className="memory-modal-overlay" onClick={onClose}>
+      <div className="memory-modal" onClick={e => e.stopPropagation()}>
+        <div className="memory-modal-header">
+          <h2>📔 {lobsterName} - 工作日记</h2>
+          <button className="close-btn" onClick={onClose}>×</button>
+        </div>
+
+        <div className="memory-modal-body">
+          {/* 日记内容 */}
+          <div className="memory-content">
+            {content ? (
+              <div className="memory-text">
+                <h3>📅 {selectedDate}</h3>
+                <pre>{content}</pre>
+              </div>
+            ) : (
+              <div className="memory-empty">
+                <p>这一天还没有日记</p>
+              </div>
+            )}
+          </div>
+
+          {/* 日历 */}
+          <div className="memory-calendar-panel">
+            <div className="calendar-header">
+              <button onClick={() => changeMonth(-1)}>◀</button>
+              <span>{currentMonth.getFullYear()}年 {currentMonth.getMonth() + 1}月</span>
+              <button onClick={() => changeMonth(1)}>▶</button>
+            </div>
+            <div className="calendar-grid">
+              {['日', '一', '二', '三', '四', '五', '六'].map(day => (
+                <div key={day} className="calendar-weekday">{day}</div>
+              ))}
+              {renderCalendar()}
+            </div>
+            <div className="calendar-legend">
+              <span className="legend-item has-memory">● 有日记</span>
+              <span className="legend-item no-memory">○ 无日记</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        .memory-modal-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.7);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 1000;
+        }
+
+        .memory-modal {
+          background: white;
+          border-radius: 16px;
+          width: 90%;
+          max-width: 1000px;
+          max-height: 90vh;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .memory-modal-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 20px;
+          border-bottom: 1px solid #e2e8f0;
+        }
+
+        .memory-modal-header h2 {
+          color: #1a365d;
+          margin: 0;
+        }
+
+        .close-btn {
+          background: none;
+          border: none;
+          font-size: 2em;
+          cursor: pointer;
+          color: #718096;
+        }
+
+        .close-btn:hover {
+          color: #2d3748;
+        }
+
+        .memory-modal-body {
+          display: grid;
+          grid-template-columns: 1fr 350px;
+          gap: 20px;
+          padding: 20px;
+          overflow: hidden;
+        }
+
+        .memory-content {
+          background: #f7fafc;
+          border: 1px solid #e2e8f0;
+          border-radius: 8px;
+          padding: 20px;
+          overflow-y: auto;
+          max-height: 600px;
+        }
+
+        .memory-text h3 {
+          color: #553c9a;
+          margin-bottom: 15px;
+        }
+
+        .memory-text pre {
+          white-space: pre-wrap;
+          word-wrap: break-word;
+          font-family: 'Courier New', monospace;
+          font-size: 0.9em;
+          color: #2d3748;
+          line-height: 1.6;
+        }
+
+        .memory-empty {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          color: #a0aec0;
+        }
+
+        .memory-calendar-panel {
+          border: 1px solid #e2e8f0;
+          border-radius: 8px;
+          padding: 15px;
+          background: white;
+        }
+
+        .calendar-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 15px;
+        }
+
+        .calendar-header button {
+          background: #4299e1;
+          color: white;
+          border: none;
+          padding: 5px 12px;
+          border-radius: 6px;
+          cursor: pointer;
+        }
+
+        .calendar-header button:hover {
+          background: #3182ce;
+        }
+
+        .calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 4px;
+        }
+
+        .calendar-weekday {
+          text-align: center;
+          font-size: 0.8em;
+          color: #718096;
+          padding: 8px 0;
+          font-weight: 500;
+        }
+
+        .calendar-day {
+          aspect-ratio: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 6px;
+          font-size: 0.9em;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+
+        .calendar-day:hover:not(.empty) {
+          background: #e2e8f0;
+        }
+
+        .calendar-day.empty {
+          cursor: default;
+        }
+
+        .calendar-day.has-memory {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: white;
+          font-weight: bold;
+        }
+
+        .calendar-day.selected {
+          border: 2px solid #ed8936;
+          background: #f6ad55;
+          color: white;
+        }
+
+        .calendar-legend {
+          margin-top: 15px;
+          display: flex;
+          gap: 20px;
+          font-size: 0.85em;
+        }
+
+        .legend-item {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+        }
+
+        .legend-item.has-memory::before {
+          content: '●';
+          color: #667eea;
+        }
+
+        .legend-item.no-memory::before {
+          content: '○';
+          color: #a0aec0;
+        }
+
+        @media (max-width: 768px) {
+          .memory-modal-body {
+            grid-template-columns: 1fr;
+          }
+
+          .memory-calendar-panel {
+            order: -1;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default MemoryModal;