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

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

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

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/`)
-      .then(r => r.json())
-      .then(data => {
-        setDates(data.dates);
-        if (data.dates.length > 0) {
+    loadDates();
+  }, [lobsterId, activeTab]);
+
+  const loadDates = async () => {
+    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]);
         }
-      });
-  }, [lobsterId]);
+      } else {
+        // 加载日记日期（成才之路）
+        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}/`)
-        .then(r => r.json())
-        .then(data => {
-          if (data.content) {
-            setContent(data.content);
-          }
-        });
+      loadContent(selectedDate);
     }
-  }, [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' : ''}`}
-          onClick={() => hasMemory && setSelectedDate(dateStr)}
+          className={`calendar-day ${hasContent ? 'has-memory' : ''} ${isSelected ? 'selected' : ''}`}
+          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 no-memory">○ 无日记</span>
+              <span className="legend-item has-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>