122 lines
3.8 KiB
TypeScript
122 lines
3.8 KiB
TypeScript
import { useState } from 'react'
|
||
import { getBackgroundImage, getStaticImage } from '@/lib/utils'
|
||
import { Image, PuzzleSystem } from '@/components'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import MenuPuzzleCenter from '@/components/puzzle/MenuPuzzleCenter'
|
||
import { DEFAULT_PUZZLE_RESIDENCE } from '@/config/puzzleResidences'
|
||
|
||
const Menu = () => {
|
||
const navigate = useNavigate()
|
||
const [isPuzzleCenterVisible, setIsPuzzleCenterVisible] = useState(false)
|
||
const [activeResidence, setActiveResidence] = useState<string | null>(null)
|
||
|
||
/**
|
||
* 类型：1：革命先驱、文化民人、艺术名家、经济巨擘
|
||
*/
|
||
const Category = [
|
||
{
|
||
id: 1,
|
||
name: '革命先驱',
|
||
moduleName: 'revolutionary',
|
||
image: 'menu/模块-革命先驱',
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '文教名人',
|
||
moduleName: 'cultural',
|
||
image: 'menu/模块-文教名人',
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '艺术名家',
|
||
moduleName: 'artistic',
|
||
image: 'menu/模块-艺术名家',
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '经济巨擘',
|
||
moduleName: 'economic',
|
||
image: 'menu/模块-经济巨擘',
|
||
},
|
||
]
|
||
|
||
return (
|
||
<div
|
||
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
||
style={{ backgroundImage: getBackgroundImage('menu/故居入口页底图') }}
|
||
>
|
||
<Image
|
||
className="absolute top-10 left-10"
|
||
src={getStaticImage('menu/首页-返回')}
|
||
button
|
||
onClick={() => navigate('/')}
|
||
/>
|
||
|
||
{/* 左下角碎片盒按钮 - 进入拼图系统 */}
|
||
<div className="absolute left-4 bottom-4 z-10 cursor-pointer">
|
||
<Image
|
||
src={getStaticImage('components/拼图盒')}
|
||
button
|
||
onClick={() => setActiveResidence(DEFAULT_PUZZLE_RESIDENCE)}
|
||
/>
|
||
</div>
|
||
|
||
{/* 顶层碎片管理中心：查看故居导图与进度 */}
|
||
<MenuPuzzleCenter
|
||
visible={isPuzzleCenterVisible}
|
||
onClose={() => setIsPuzzleCenterVisible(false)}
|
||
onSelectResidence={(residence) => {
|
||
setActiveResidence(residence)
|
||
setIsPuzzleCenterVisible(false)
|
||
}}
|
||
allowPuzzleEntry={false}
|
||
/>
|
||
|
||
{/* 进入具体故居的拼图系统（与故居页面一致的 PuzzleSystem） */}
|
||
{activeResidence && (
|
||
<PuzzleSystem
|
||
visible={!!activeResidence}
|
||
onClose={() => setActiveResidence(null)}
|
||
residence={activeResidence}
|
||
showResidenceNav
|
||
onResidenceChange={setActiveResidence}
|
||
/>
|
||
)}
|
||
|
||
<div className="absolute left-40 top-70 inline-grid grid-cols-2 gap-x-20 gap-y-10">
|
||
{Category.map((item) => (
|
||
<div
|
||
className="relative w-[241px] h-[282px] bg-cover bg-center bg-no-repeat hover:brightness-110 hover:scale-105 transition-all cursor-pointer"
|
||
style={{ backgroundImage: getBackgroundImage('menu/模块-通用') }}
|
||
key={item.id}
|
||
onClick={() => navigate(`/entrance/${encodeURIComponent(item.moduleName)}`)}
|
||
>
|
||
<div className="absolute top-15 flex flex-col items-center">
|
||
<Image key={item.id} src={getStaticImage(item.image)} />
|
||
|
||
<div className="relative mt-23">
|
||
<Image className="absolute bottom-5" src={getStaticImage('menu/未看完')} />
|
||
<Image src={getStaticImage('menu/未探索')} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 学习地图 */}
|
||
<Image className="absolute bottom-100 right-60" src={getStaticImage('menu/学习地图')} />
|
||
<div className="absolute bottom-50 right-57">
|
||
<div className="relative">
|
||
<Image
|
||
src={getStaticImage('menu/导航地图')}
|
||
button
|
||
onClick={() => setIsPuzzleCenterVisible(true)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Menu
|