feat: 优化日新功能交互流程

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

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

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

📖 苟日新,日日新,又日新
This commit is contained in:
2026-04-02 14:15:46 +08:00
parent 4b4cd73a77
commit f5ac1e85bf
4 changed files with 13 additions and 56 deletions

View File

@@ -2,7 +2,6 @@ import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard'; import Dashboard from './pages/Dashboard';
import LobsterDetail from './components/LobsterDetail'; import LobsterDetail from './components/LobsterDetail';
import MemoryPage from './pages/MemoryPage';
function App() { function App() {
return ( return (
@@ -10,7 +9,6 @@ function App() {
<Routes> <Routes>
<Route path="/" element={<Dashboard />} /> <Route path="/" element={<Dashboard />} />
<Route path="/lobster/:lobsterId" element={<LobsterDetail />} /> <Route path="/lobster/:lobsterId" element={<LobsterDetail />} />
<Route path="/lobster/:lobsterId/memory" element={<MemoryPage />} />
</Routes> </Routes>
</Router> </Router>
); );

View File

@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; import { useParams, useNavigate } from 'react-router-dom';
import axios from 'axios'; import axios from 'axios';
import MemoryModal from '../MemoryModal';
const API_BASE = 'http://localhost:8000/api'; const API_BASE = 'http://localhost:8000/api';
@@ -9,6 +10,7 @@ function LobsterDetail() {
const navigate = useNavigate(); const navigate = useNavigate();
const [lobster, setLobster] = useState(null); const [lobster, setLobster] = useState(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [showMemory, setShowMemory] = useState(false);
useEffect(() => { useEffect(() => {
fetchLobsterDetail(); fetchLobsterDetail();
@@ -124,9 +126,9 @@ function LobsterDetail() {
<div className="action-buttons"> <div className="action-buttons">
<button <button
className="action-btn primary" className="action-btn primary"
onClick={() => navigate(`/lobster/${lobsterId}/memory`)} onClick={() => setShowMemory(true)}
> >
🧠 查看记忆 📖 日新
</button> </button>
<button <button
className="action-btn" className="action-btn"
@@ -175,6 +177,15 @@ function LobsterDetail() {
</div> </div>
</div> </div>
{/* 日新弹窗 */}
{showMemory && (
<MemoryModal
lobsterId={lobsterId}
lobsterName={`${lobster.emoji} ${lobster.name}`}
onClose={() => setShowMemory(false)}
/>
)}
<style>{` <style>{`
.lobster-detail { .lobster-detail {
max-width: 1200px; max-width: 1200px;

View File

@@ -48,9 +48,6 @@ function Dashboard() {
<button className="detail-btn" onClick={() => navigate(`/lobster/${lobster.id}`)}> <button className="detail-btn" onClick={() => navigate(`/lobster/${lobster.id}`)}>
📊 详情 📊 详情
</button> </button>
<button className="memory-btn" onClick={() => navigate(`/lobster/${lobster.id}/memory`)}>
📖 日新
</button>
</div> </div>
</div> </div>
))} ))}
@@ -169,16 +166,6 @@ const styles = `
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4); 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 { .loading {
text-align: center; text-align: center;
padding: 50px; padding: 50px;

View File

@@ -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;