feat: 优化日新功能交互流程
- 移除首页的'日新'按钮,每个龙虾卡片只保留'详情'按钮
- 日新功能整合到 LobsterDetail 组件内(弹窗形式)
- 删除 MemoryPage 路由组件(不再需要独立路由)
- 简化 App.js 路由配置,只保留两条路由:
* / - Dashboard 首页
* /lobster/:id - LobsterDetail 详情页
交互流程:
1. 首页点击'详情' → 进入龙虾详情页
2. 详情页点击'日新' → 打开 MemoryModal 弹窗
3. 弹窗内切换标签:成才之路 / 工作记忆
4. 关闭弹窗 → 返回详情页
优点:
- 首页更简洁,一个卡片一个按钮
- 所有龙虾共用弹窗组件,无需 n 个路由
- 功能整合,逻辑更清晰
- 更符合 React 组件化设计
📖 苟日新,日日新,又日新
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
|
||||||
Reference in New Issue
Block a user