feat: 添加断点续读功能,优化用户体验
- 在 chenyunStore 中引入 lastVisitedPlace 和 setLastVisitedPlace 方法,支持记录用户上次访问的场景。 - 在各个场景组件中使用 useEffect 设置 lastVisitedPlace,确保用户在返回时能继续上次访问的地点。 - 更新相关组件,确保在导航时能够正确使用 lastVisitedPlace,提升用户交互体验。 - 在 puzzleStore 中添加保存用户定义的功能,增强数据持久性。
This commit is contained in:
1 parent
76c67b492e
commit
b1d55b9464
17 files changed
+147
-54
No files matched your search
@@ -23,6 +23,11 @@ interface ChenyunStore {
|
||||
// 重置所有访问记录
|
||||
resetAll: () => void
|
||||
|
||||
// ========== 断点续读 ==========
|
||||
// 上次访问的场景(place1~place9)
|
||||
lastVisitedPlace: string | null
|
||||
setLastVisitedPlace: (place: string) => void
|
||||
|
||||
// ========== 体悟模块状态 ==========
|
||||
// 银元之战是否已解决
|
||||
isYinyuanSolved: boolean
|
||||
@@ -105,6 +110,10 @@ export const useChenyunStore = create<ChenyunStore>()(
|
||||
set({ visitedExhibits: {} })
|
||||
},
|
||||
|
||||
// ========== 断点续读 ==========
|
||||
lastVisitedPlace: null,
|
||||
setLastVisitedPlace: (place: string) => set({ lastVisitedPlace: place }),
|
||||
|
||||
// ========== 体悟模块状态 ==========
|
||||
isYinyuanSolved: false,
|
||||
setYinyuanSolved: (solved: boolean) => {
|
||||
@@ -122,6 +131,7 @@ export const useChenyunStore = create<ChenyunStore>()(
|
||||
visitedExhibits: serializeVisitedExhibits(state.visitedExhibits),
|
||||
isYinyuanSolved: state.isYinyuanSolved,
|
||||
isMimianSolved: state.isMimianSolved,
|
||||
lastVisitedPlace: state.lastVisitedPlace,
|
||||
}),
|
||||
onRehydrateStorage: () => (state) => {
|
||||
if (state) {
|
||||
@@ -134,6 +144,9 @@ export const useChenyunStore = create<ChenyunStore>()(
|
||||
if (state.isMimianSolved === undefined) {
|
||||
state.isMimianSolved = false
|
||||
}
|
||||
if (state.lastVisitedPlace === undefined) {
|
||||
state.lastVisitedPlace = null
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -151,6 +164,7 @@ export const saveChenyunStore = (): void => {
|
||||
visitedExhibits: serializeVisitedExhibits(state.visitedExhibits),
|
||||
isYinyuanSolved: state.isYinyuanSolved,
|
||||
isMimianSolved: state.isMimianSolved,
|
||||
lastVisitedPlace: state.lastVisitedPlace,
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
import { STORE_NAMES } from './storeNames'
|
||||
import { setUserDefine } from '@/lib/utils/api-common'
|
||||
|
||||
interface PuzzleStore {
|
||||
// 每个故居的已解锁碎片集合,格式:{ residence: Set<pieceId> }
|
||||
@@ -35,7 +36,7 @@ const serializePuzzles = (puzzles: Record<string, Set<number>>) => {
|
||||
}
|
||||
|
||||
// 将数组转换回 Set
|
||||
const deserializePuzzles = (serialized: Record<string, number[]> | undefined) => {
|
||||
export const deserializePuzzles = (serialized: Record<string, number[]> | undefined) => {
|
||||
if (!serialized || typeof serialized !== 'object') {
|
||||
return {}
|
||||
}
|
||||
@@ -83,6 +84,7 @@ export const usePuzzleStore = create<PuzzleStore>()(
|
||||
if (!residencePuzzles.has(pieceId)) {
|
||||
const newPuzzles = { ...fixedPuzzles }
|
||||
newPuzzles[residence] = new Set([...residencePuzzles, pieceId])
|
||||
savePuzzleStore(newPuzzles)
|
||||
set({ puzzles: newPuzzles })
|
||||
}
|
||||
},
|
||||
@@ -156,3 +158,19 @@ export const usePuzzleStore = create<PuzzleStore>()(
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
// ========== 易班平台数据保存 ==========
|
||||
export const PUZZLE_LESSON_ID = 'Cheny_neihua'
|
||||
export const PUZZLE_KEY = 24
|
||||
|
||||
export const savePuzzleStore = (puzzles: Record<string, Set<number>>): void => {
|
||||
const payload = {
|
||||
puzzles: serializePuzzles(puzzles),
|
||||
}
|
||||
|
||||
try {
|
||||
setUserDefine(PUZZLE_LESSON_ID, PUZZLE_KEY, JSON.stringify(payload))
|
||||
} catch (error) {
|
||||
console.error('Failed to save Chenyun store', error)
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user