From f5ac1e85bf99863022f6d2ba1068702b2e2129f2 Mon Sep 17 00:00:00 2001
From: flying-hero <462087392@qq.com>
Date: Thu, 2 Apr 2026 14:15:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=97=A5=E6=96=B0?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BA=A4=E4=BA=92=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除首页的'日新'按钮，每个龙虾卡片只保留'详情'按钮
- 日新功能整合到 LobsterDetail 组件内（弹窗形式）
- 删除 MemoryPage 路由组件（不再需要独立路由）
- 简化 App.js 路由配置，只保留两条路由：
  * / - Dashboard 首页
  * /lobster/:id - LobsterDetail 详情页

交互流程：
1. 首页点击'详情' → 进入龙虾详情页
2. 详情页点击'日新' → 打开 MemoryModal 弹窗
3. 弹窗内切换标签：成才之路 / 工作记忆
4. 关闭弹窗 → 返回详情页

优点：
- 首页更简洁，一个卡片一个按钮
- 所有龙虾共用弹窗组件，无需 n 个路由
- 功能整合，逻辑更清晰
- 更符合 React 组件化设计

📖 苟日新，日日新，又日新
---
 code/frontend/src/App.js                      |  2 -
 .../src/components/LobsterDetail/index.js     | 15 ++++++-
 code/frontend/src/pages/Dashboard/index.js    | 13 -------
 code/frontend/src/pages/MemoryPage/index.js   | 39 -------------------
 4 files changed, 13 insertions(+), 56 deletions(-)
 delete mode 100644 code/frontend/src/pages/MemoryPage/index.js

diff --git a/code/frontend/src/App.js b/code/frontend/src/App.js
index 16a3025..c6d227b 100644
--- a/code/frontend/src/App.js
+++ b/code/frontend/src/App.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Dashboard from './pages/Dashboard';
 import LobsterDetail from './components/LobsterDetail';
-import MemoryPage from './pages/MemoryPage';
 
 function App() {
   return (
@@ -10,7 +9,6 @@ function App() {
       <Routes>
         <Route path="/" element={<Dashboard />} />
         <Route path="/lobster/:lobsterId" element={<LobsterDetail />} />
-        <Route path="/lobster/:lobsterId/memory" element={<MemoryPage />} />
       </Routes>
     </Router>
   );
diff --git a/code/frontend/src/components/LobsterDetail/index.js b/code/frontend/src/components/LobsterDetail/index.js
index 7dc37fb..0e533b1 100644
--- a/code/frontend/src/components/LobsterDetail/index.js
+++ b/code/frontend/src/components/LobsterDetail/index.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import MemoryModal from '../MemoryModal';
 
 const API_BASE = 'http://localhost:8000/api';
 
@@ -9,6 +10,7 @@ function LobsterDetail() {
   const navigate = useNavigate();
   const [lobster, setLobster] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [showMemory, setShowMemory] = useState(false);
 
   useEffect(() => {
     fetchLobsterDetail();
@@ -124,9 +126,9 @@ function LobsterDetail() {
             <div className="action-buttons">
               <button 
                 className="action-btn primary"
-                onClick={() => navigate(`/lobster/${lobsterId}/memory`)}
+                onClick={() => setShowMemory(true)}
               >
-                🧠 查看记忆
+                📖 日新
               </button>
               <button 
                 className="action-btn"
@@ -175,6 +177,15 @@ function LobsterDetail() {
         </div>
       </div>
 
+      {/* 日新弹窗 */}
+      {showMemory && (
+        <MemoryModal
+          lobsterId={lobsterId}
+          lobsterName={`${lobster.emoji} ${lobster.name}`}
+          onClose={() => setShowMemory(false)}
+        />
+      )}
+
       <style>{`
         .lobster-detail {
           max-width: 1200px;
diff --git a/code/frontend/src/pages/Dashboard/index.js b/code/frontend/src/pages/Dashboard/index.js
index dc0bbae..6032e91 100644
--- a/code/frontend/src/pages/Dashboard/index.js
+++ b/code/frontend/src/pages/Dashboard/index.js
@@ -48,9 +48,6 @@ function Dashboard() {
               <button className="detail-btn" onClick={() => navigate(`/lobster/${lobster.id}`)}>
                 📊 详情
               </button>
-              <button className="memory-btn" onClick={() => navigate(`/lobster/${lobster.id}/memory`)}>
-                📖 日新
-              </button>
             </div>
           </div>
         ))}
@@ -169,16 +166,6 @@ const styles = `
   box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
 }
 
-.memory-btn {
-  background: #edf2f7;
-  color: #4a5568;
-}
-
-.memory-btn:hover {
-  background: #e2e8f0;
-  transform: translateY(-2px);
-}
-
 .loading {
   text-align: center;
   padding: 50px;
diff --git a/code/frontend/src/pages/MemoryPage/index.js b/code/frontend/src/pages/MemoryPage/index.js
deleted file mode 100644
index 78b90e1..0000000
--- a/code/frontend/src/pages/MemoryPage/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import MemoryModal from '../../components/MemoryModal/index.js';
-
-function MemoryPage() {
-  const { lobsterId } = useParams();
-  const navigate = useNavigate();
-  const [lobster, setLobster] = useState(null);
-
-  // 龙虾数据（应该从 API 获取，这里简化处理）
-  const lobsters = {
-    1: { name: '飞行侠', emoji: '🦸' },
-    2: { name: '道童', emoji: '☯️' },
-    3: { name: '墨子', emoji: '🔧' },
-    4: { name: '织网者', emoji: '🕸️' },
-    5: { name: '费曼', emoji: '⚛️' },
-    6: { name: '守望者', emoji: '👁️' },
-  };
-
-  const lobsterData = lobsters[lobsterId];
-
-  const handleClose = () => {
-    navigate(`/lobster/${lobsterId}`);
-  };
-
-  if (!lobsterData) {
-    return <div>龙虾不存在</div>;
-  }
-
-  return (
-    <MemoryModal
-      lobsterId={lobsterId}
-      lobsterName={`${lobsterData.emoji} ${lobsterData.name}`}
-      onClose={handleClose}
-    />
-  );
-}
-
-export default MemoryPage;