openclaw-monitor/code/frontend/src/components/MemoryModal/index.js

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(() => {
    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]);
        }
      } 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) {
      loadContent(selectedDate);
    }
  }, [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 = () => {
    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 = [];
    const hasContentDates = activeTab === 'memory' ? dates : diaryDates;
    
    // 空白格子
    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 hasContent = hasContentDates.includes(dateStr);
      const isSelected = selectedDate === dateStr;

      days.push(
        <div
          key={day}
          className={`calendar-day ${hasContent ? 'has-memory' : ''} ${isSelected ? 'selected' : ''}`}
          onClick={() => hasContent && setSelectedDate(dateStr)}
        >
          {day}
        </div>
      );
    }

    return days;
  };

  const changeMonth = (delta) => {
    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>{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">
            {loading ? (
              <div className="loading-state">加载中...</div>
            ) : content ? (
              <div className="memory-text">
                <h3>📅 {selectedDate}</h3>
                <pre>{content}</pre>
              </div>
            ) : (
              <div className="memory-empty">
                <p>{emptyText}</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 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>
      </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;
          font-size: 1.4em;
        }

        .close-btn {
          background: none;
          border: none;
          font-size: 2em;
          cursor: pointer;
          color: #718096;
        }

        .close-btn:hover {
          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;
          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;
        }

        .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;
        }

        .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;
          font-size: 1.1em;
        }

        .memory-calendar-panel {
          border: 1px solid #e2e8f0;
          border-radius: 6px;
          padding: 10px;
          background: white;
          display: flex;
          flex-direction: column;
          width: 260px;
          min-width: 260px;
        }

        .calendar-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
        }

        .calendar-header button {
          background: #4299e1;
          color: white;
          border: none;
          padding: 3px 6px;
          border-radius: 3px;
          cursor: pointer;
          font-size: 0.85em;
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .calendar-header button:hover {
          background: #3182ce;
        }

        .calendar-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 2px;
          flex: 1;
        }

        .calendar-weekday {
          text-align: center;
          font-size: 0.75em;
          color: #718096;
          padding: 6px 0;
          font-weight: 500;
        }

        .calendar-day {
          width: 100%;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 3px;
          font-size: 0.75em;
          cursor: pointer;
          transition: all 0.2s;
          padding: 0;
          box-sizing: border-box;
        }

        .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;
          width: 100%;
          height: 32px;
        }

        .calendar-day.selected {
          border: 2px solid #ed8936;
          background: #f6ad55;
          color: white;
          width: 100%;
          height: 32px;
        }

        .calendar-legend {
          margin-top: 8px;
          display: flex;
          gap: 12px;
          font-size: 0.75em;
          padding-top: 8px;
          border-top: 1px solid #e2e8f0;
        }

        .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;
        }

        .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: 4px 10px;
          border-radius: 16px;
          font-size: 0.75em;
          font-weight: 600;
        }

        @media (max-width: 768px) {
          .memory-modal-body {
            grid-template-columns: 1fr;
          }

          .memory-calendar-panel {
            order: -1;
          }

          .tab-btn {
            padding: 12px 15px;
            font-size: 0.9em;
          }
        }
      `}</style>
    </div>
  );
}

export default MemoryModal;