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