feat: 添加日记（成才之路）功能

- 前端 MemoryModal 添加标签切换（成才之路/工作记忆）
- Dashboard 按钮更名为'日新'（📖）
- 后端添加日记 API：
  * /api/lobsters/<id>/diary/dates/ - 获取日记日期
  * /api/lobsters/<id>/diary/<date>/ - 获取日记内容
- 日记优先显示故事版，其次技术版
- 日历显示本月日记统计
- 优化 UI 样式和加载状态

📖 苟日新，日日新，又日新

code/backend/api/urls.py

@@ -10,5 +10,7 @@ urlpatterns = [
     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('lobsters/<int:lobster_id>/diary/dates/', views.lobster_diary_dates, name='lobster-diary-dates'),
+    path('lobsters/<int:lobster_id>/diary/<str:date>/', views.lobster_diary_detail, name='lobster-diary-detail'),
     path('tools/', views.tools_list, name='tools-list'),
 ]

code/backend/api/views.py

@@ -113,3 +113,41 @@ def lobster_memory_detail(request, lobster_id, date):
         'date': date,
         'content': content
     })
+
+@api_view(['GET'])
+def lobster_diary_dates(request, lobster_id):
+    """获取龙虾有日记（成才之路）的日期列表"""
+    # 日记文件目录
+    diary_dir = Path(f'/home/node/.openclaw/workspace/flying-hero/memory/成才之路')
+    
+    # 获取所有日记文件
+    dates = []
+    if diary_dir.exists():
+        for file in diary_dir.glob('*.md'):
+            # 提取日期 (YYYY-MM-DD.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 = list(set(dates))  # 去重
+    dates.sort(reverse=True)
+    return Response({'dates': dates})
+
+@api_view(['GET'])
+def lobster_diary_detail(request, lobster_id, date):
+    """获取指定日期的日记内容（成才之路）"""
+    # 优先查找故事版，其次技术版，再其次普通版
+    diary_file = Path(f'/home/node/.openclaw/workspace/flying-hero/memory/成才之路/{date}-故事版.md')
+    if not diary_file.exists():
+        diary_file = Path(f'/home/node/.openclaw/workspace/flying-hero/memory/成才之路/{date}-技术版.md')
+    if not diary_file.exists():
+        diary_file = Path(f'/home/node/.openclaw/workspace/flying-hero/memory/成才之路/{date}.md')
+    
+    if not diary_file.exists():
+        return Response({'error': '该日期没有日记'}, status=404)
+    
+    content = diary_file.read_text(encoding='utf-8')
+    return Response({
+        'date': date,
+        'content': content
+    })

code/frontend/src/components/MemoryModal/index.js

@@ -3,35 +3,72 @@ import React, { useState, useEffect } from 'react';
 const API_BASE = 'http://localhost:8000/api';
 
 function MemoryModal({ lobsterId, lobsterName, onClose }) {
+  const [activeTab, setActiveTab] = useState('diary'); // 'memory' 或 'diary'
   const [dates, setDates] = useState([]);
+  const [diaryDates, setDiaryDates] = useState([]);
   const [selectedDate, setSelectedDate] = useState('');
   const [content, setContent] = useState('');
   const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [loading, setLoading] = useState(false);
 
-  // 加载有日记的日期
+  // 加载记忆和日记的日期
   useEffect(() => {
-    fetch(`${API_BASE}/lobsters/${lobsterId}/memory/dates/`)
+    loadDates();
-      .then(r => r.json())
+  }, [lobsterId, activeTab]);
-      .then(data => {
+
-        setDates(data.dates);
+  const loadDates = async () => {
-        if (data.dates.length > 0) {
+    setLoading(true);
+    try {
+      if (activeTab === 'memory') {
+        // 加载记忆日期（每日记忆文件）
+        const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/memory/dates/`);
+        const data = await response.json();
+        setDates(data.dates || []);
+        if (data.dates && data.dates.length > 0) {
           setSelectedDate(data.dates[0]);
         }
-      });
+      } else {
-  }, [lobsterId]);
+        // 加载日记日期（成才之路）
+        const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/diary/dates/`);
+        const data = await response.json();
+        setDiaryDates(data.dates || []);
+        if (data.dates && data.dates.length > 0) {
+          setSelectedDate(data.dates[0]);
+        }
+      }
+    } catch (error) {
+      console.error('加载日期失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
 
-  // 加载选中日期的日记
+  // 加载选中日期的内容
   useEffect(() => {
     if (selectedDate) {
-      fetch(`${API_BASE}/lobsters/${lobsterId}/memory/${selectedDate}/`)
+      loadContent(selectedDate);
-        .then(r => r.json())
-        .then(data => {
-          if (data.content) {
-            setContent(data.content);
-          }
-        });
     }
-  }, [selectedDate, lobsterId]);
+  }, [selectedDate, activeTab, lobsterId]);
+
+  const loadContent = async (date) => {
+    setLoading(true);
+    try {
+      if (activeTab === 'memory') {
+        const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/memory/${date}/`);
+        const data = await response.json();
+        setContent(data.content || '');
+      } else {
+        const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/diary/${date}/`);
+        const data = await response.json();
+        setContent(data.content || '');
+      }
+    } catch (error) {
+      console.error('加载内容失败:', error);
+      setContent('');
+    } finally {
+      setLoading(false);
+    }
+  };
 
   // 渲染日历
   const renderCalendar = () => {
@@ -43,6 +80,7 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
     const startWeekday = firstDay.getDay();
 
     const days = [];
+    const hasContentDates = activeTab === 'memory' ? dates : diaryDates;
     
     // 空白格子
     for (let i = 0; i < startWeekday; i++) {
@@ -52,14 +90,14 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
     // 日期格子
     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 hasContent = hasContentDates.includes(dateStr);
       const isSelected = selectedDate === dateStr;
 
       days.push(
         <div
           key={day}
-          className={`calendar-day ${hasMemory ? 'has-memory' : ''} ${isSelected ? 'selected' : ''}`}
+          className={`calendar-day ${hasContent ? 'has-memory' : ''} ${isSelected ? 'selected' : ''}`}
-          onClick={() => hasMemory && setSelectedDate(dateStr)}
+          onClick={() => hasContent && setSelectedDate(dateStr)}
         >
           {day}
         </div>
@@ -73,25 +111,47 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
     setCurrentMonth(new Date(currentMonth.setMonth(currentMonth.getMonth() + delta)));
   };
 
+  const currentDates = activeTab === 'memory' ? dates : diaryDates;
+  const title = activeTab === 'memory' ? '📔 工作记忆' : '📖 成才之路';
+  const emptyText = activeTab === 'memory' ? '这一天还没有工作记忆' : '这一天还没有日记';
+
   return (
     <div className="memory-modal-overlay" onClick={onClose}>
       <div className="memory-modal" onClick={e => e.stopPropagation()}>
         <div className="memory-modal-header">
-          <h2>📔 {lobsterName} - 工作日记</h2>
+          <h2>{title} - {lobsterName}</h2>
           <button className="close-btn" onClick={onClose}>×</button>
         </div>
 
+        {/* 切换标签 */}
+        <div className="tab-header">
+          <button 
+            className={`tab-btn ${activeTab === 'diary' ? 'active' : ''}`}
+            onClick={() => setActiveTab('diary')}
+          >
+            📖 成才之路
+          </button>
+          <button 
+            className={`tab-btn ${activeTab === 'memory' ? 'active' : ''}`}
+            onClick={() => setActiveTab('memory')}
+          >
+            📔 工作记忆
+          </button>
+        </div>
+
         <div className="memory-modal-body">
-          {/* 日记内容 */}
+          {/* 内容区域 */}
           <div className="memory-content">
-            {content ? (
+            {loading ? (
+              <div className="loading-state">加载中...</div>
+            ) : content ? (
               <div className="memory-text">
                 <h3>📅 {selectedDate}</h3>
                 <pre>{content}</pre>
               </div>
             ) : (
               <div className="memory-empty">
-                <p>这一天还没有日记</p>
+                <p>{emptyText}</p>
               </div>
             )}
           </div>
@@ -110,8 +170,15 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
               {renderCalendar()}
             </div>
             <div className="calendar-legend">
-              <span className="legend-item has-memory">● 有日记</span>
+              <span className="legend-item has-memory">● 有内容</span>
-              <span className="legend-item no-memory">○ 无日记</span>
+              <span className="legend-item no-memory">○ 无内容</span>
+            </div>
+            <div className="calendar-stats">
+              <span className="stat-badge">
+                📅 本月 {currentDates.filter(d => 
+                  d.startsWith(`${currentMonth.getFullYear()}-${String(currentMonth.getMonth() + 1).padStart(2, '0')}`)
+                ).length} 篇
+              </span>
             </div>
           </div>
         </div>
@@ -153,6 +220,7 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
         .memory-modal-header h2 {
           color: #1a365d;
           margin: 0;
+          font-size: 1.4em;
         }
 
         .close-btn {
@@ -167,6 +235,35 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
           color: #2d3748;
         }
 
+        .tab-header {
+          display: flex;
+          border-bottom: 2px solid #e2e8f0;
+        }
+
+        .tab-btn {
+          flex: 1;
+          padding: 15px 20px;
+          background: #f7fafc;
+          border: none;
+          border-bottom: 3px solid transparent;
+          cursor: pointer;
+          font-size: 1em;
+          font-weight: 600;
+          color: #718096;
+          transition: all 0.2s;
+        }
+
+        .tab-btn:hover {
+          background: #edf2f7;
+          color: #4a5568;
+        }
+
+        .tab-btn.active {
+          background: white;
+          color: #553c9a;
+          border-bottom-color: #553c9a;
+        }
+
         .memory-modal-body {
           display: grid;
           grid-template-columns: 1fr 350px;
@@ -184,6 +281,15 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
           max-height: 600px;
         }
 
+        .loading-state {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 200px;
+          color: #718096;
+          font-size: 1.1em;
+        }
+
         .memory-text h3 {
           color: #553c9a;
           margin-bottom: 15px;
@@ -204,6 +310,7 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
           justify-content: center;
           height: 100%;
           color: #a0aec0;
+          font-size: 1.1em;
         }
 
         .memory-calendar-panel {
@@ -211,6 +318,8 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
           border-radius: 8px;
           padding: 15px;
           background: white;
+          display: flex;
+          flex-direction: column;
         }
 
         .calendar-header {
@@ -237,6 +346,7 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
           gap: 4px;
+          flex: 1;
         }
 
         .calendar-weekday {
@@ -279,10 +389,12 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
         }
 
         .calendar-legend {
-          margin-top: 15px;
+          margin-top: 10px;
           display: flex;
           gap: 20px;
           font-size: 0.85em;
+          padding-top: 10px;
+          border-top: 1px solid #e2e8f0;
         }
 
         .legend-item {
@@ -301,6 +413,23 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
           color: #a0aec0;
         }
 
+        .calendar-stats {
+          margin-top: 10px;
+          padding-top: 10px;
+          border-top: 1px solid #e2e8f0;
+          display: flex;
+          justify-content: center;
+        }
+
+        .stat-badge {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: white;
+          padding: 6px 12px;
+          border-radius: 20px;
+          font-size: 0.9em;
+          font-weight: 600;
+        }
+
         @media (max-width: 768px) {
           .memory-modal-body {
             grid-template-columns: 1fr;
@@ -309,6 +438,11 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
           .memory-calendar-panel {
             order: -1;
           }
+
+          .tab-btn {
+            padding: 12px 15px;
+            font-size: 0.9em;
+          }
         }
       `}</style>
     </div>

code/frontend/src/pages/Dashboard/index.js

@@ -49,7 +49,7 @@ function Dashboard() {
                 📊 详情
               </button>
               <button className="memory-btn" onClick={() => navigate(`/lobster/${lobster.id}/memory`)}>
-                🧠 记忆
+                📖 日新
               </button>
             </div>
           </div>