hera-web/src/pages/fortune/index.tsx

import { useState } from 'react'
import Taro from '@tarojs/taro'
import { Button, Image, Text, View } from '@tarojs/components'
import { AppTabBar } from '../../components/AppTabBar'
import { TiangongHeader, TiangongMockNote, TiangongModal } from '../../components/TiangongUI'
import { deityCatalog, tiangongMock } from '../../services/tiangong'
import { useTiangongSnapshot } from '../../hooks/useTiangongSnapshot'
import { DeityId } from '../../utils/tiangongMock'
import './index.scss'

export default function FortunePage() {
  const snapshot = useTiangongSnapshot()
  const items = deityCatalog.map(item => ({ ...item, ...snapshot.deities[item.id] }))
  const [selected, setSelected] = useState<DeityId | null>(null)
  const [settings, setSettings] = useState(false)
  const balance = snapshot.balance
  const open = (id: DeityId, invite = false) => Taro.navigateTo({ url: `/pages/tiangong-detail/index?id=${id}${invite ? '&mode=invite' : ''}` })
  return <View className='tiangong-page'>
    <TiangongHeader title='天宫' /><TiangongMockNote />
    <View className='deity-grid'>
      {items.map(item => <View className='deity-card-wrap' key={item.id}>
        <Button className={`deity-card ${item.unlocked ? 'unlocked' : 'locked'}`} aria-label={`${item.name}，${item.unlocked ? '已恭请' : '未恭请'}`} onClick={() => item.unlocked ? open(item.id) : setSelected(selected === item.id ? null : item.id)}>
          <Image className='deity-image' src={item.icon} mode='aspectFill' /><Text className='deity-name'>{item.name}</Text>
        </Button>
        {selected === item.id && !item.unlocked && <View className='deity-invite-prompt'>
          <Button className='deity-prompt-close' aria-label='关闭恭请提示' onClick={() => setSelected(null)}>×</Button>
          <Text>您还未恭请此神</Text><Text>是否恭请</Text>
          <Button className='deity-invite-button' onClick={() => { setSelected(null); open(item.id, true) }}>恭请</Button>
        </View>}
      </View>)}
    </View>
    <Button className='tg-demo-settings' onClick={() => setSettings(true)}>Mock 演示设置</Button>
    {settings && <TiangongModal title='Mock 演示设置' onClose={() => setSettings(false)} variant='plain'>
      <Text className='tg-modal-title'>Mock 演示设置</Text><Text className='tg-modal-copy'>当前模拟爱心：{balance}</Text>
      <Text className='tg-modal-caption'>仅切换演示余额，不是充值。刷新网页或重新启动小程序后恢复初始样例。</Text>
      <View className='tg-modal-actions'>{([0, 100] as const).map(value => <Button className='tg-button' key={value} onClick={() => tiangongMock.setDemoBalance(value)}>设为 {value}</Button>)}</View>
      <View className='tg-modal-actions'><Button className='tg-button' onClick={() => { tiangongMock.reset(); setSelected(null); setSettings(false) }}>重置全部演示</Button></View>
    </TiangongModal>}
    <AppTabBar active='fortune' />
  </View>
}