qc-xjqxz-retro/src/pages/SystemIntroduction/index.tsx

import { useState } from "react"
import OtherHeader, { NavListProps } from "../../components/OtherHeader"
import { sysJs } from "../../assets/html"
import useScrollToTop from "../../Hook/useScrollToTop"

const navList = [
    {
        label: '宠物系统',
        value: 'petSys',
        children: [
            { label: '灵宠合成', value: 'lchc' },
            { label: '灵宠技能', value: 'lcjn' },
            { label: '灵宠星级', value: 'lcxj' },
            { label: '灵宠获得', value: 'lchd' },
            { label: '岚翼', value: 'yy' },
            { label: '熔岩兽王', value: 'rysw' },
            { label: '疚业', value: 'jy' },
            { label: '小刑天王', value: 'xxtw' },
            { label: '扬枭', value: 'ys' },
            { label: '驰雷兽王', value: 'clsw' },
            { label: '精精', value: 'jj' },
            { label: '冰鳞', value: 'bl' },
            { label: '黑王', value: 'hw' },
            { label: '茅山狸', value: 'msl' },
            { label: '苍萤', value: 'cy' },
            { label: '年兽', value: 'ns' },
            { label: '白灵圣狐', value: 'blsh' },
            { label: '新年包子', value: 'xnbz' },
            { label: '凤小凰', value: 'fxh' },
            { label: '锦八爷', value: 'zby' },
            { label: '熊本熊', value: 'xbx' },
            { label: '大熊猫', value: 'dxm' },
            { label: '花楹', value: 'hy' },
            { label: '桃子妖怪', value: 'tzyg' },
            { label: '盗宝包子', value: 'dbbz' },
            { label: '弹性包子', value: 'txbz' },
            { label: '槐米', value: 'km' },
            { label: '山猿', value: 'sy' },
            { label: '童草', value: 'tc' },
            { label: '三尾狐', value: 'swh' },
            { label: '岚蜂', value: 'lf' },
            { label: '雪纹虎', value: 'xwb' },
            { label: '灵苞花母', value: 'lbhm' },
            { label: '岩羊', value: 'yy1' },
            { label: '钩尾蝎', value: 'gwx' },
            { label: '吞月猫妖', value: 'tymy' },
            { label: '峰龟', value: 'fg' },
            { label: '蝶妖', value: 'dy' },
            { label: '画妖', value: 'hy1' },
            { label: '风灵兽', value: 'fls' },
            { label: '魔骨', value: 'mg' },
            { label: '魁召', value: 'kz' },
            { label: '雷兽', value: 'ls' },
            { label: '炎帝侍', value: 'yds' },
            { label: '天禄', value: 'tl' },
            { label: '苍角', value: 'cj' },
            { label: '沼狞', value: 'zn' },
            { label: '雪女', value: 'xn' },
            { label: '蕴儿', value: 'ye' },
            { label: '句芒', value: 'jm' },
            { label: '飞天神女', value: 'ftsn' },
            { label: '镇狱明王', value: 'zymw' },
        ]
    },
    {
        label: '战斗系统',
        value: 'battleSys',
        children: [
            { label: '队长战斗指令', value: 'dzzdzl' },
            { label: '战斗信息查看', value: 'zdxick' },
            { label: '战斗规则', value: 'zdgz' },
        ]
    },
    {
        label: '奇侠系统',
        value: 'xiahSys',
        children: [
            { label: '赵灵儿', value: 'zle' },
            { label: '血手', value: 'xs' },
            { label: '小蛮', value: 'xm' },
            { label: '夏孤临', value: 'xgl' },
            { label: '王小虎', value: 'wxh' },
            { label: '唐雨柔', value: 'tyl' },
            { label: '苏媚', value: 'sm' },
            { label: '沈欺霜', value: 'sqs' },
            { label: '欧阳慧', value: 'oyh' },
            { label: '龙幽', value: 'jy' },
            { label: '林月如', value: 'lyr1' },
            { label: '林未央', value: 'lwy' },
            { label: '李忆如', value: 'lyr' },
            { label: '李逍遥', value: 'lxy' },
            { label: '姜云凡', value: 'jye' },
            { label: '红姬', value: 'hj' },
            { label: '毒影', value: 'dy' },
            { label: '阿奴', value: 'an' },
            { label: '缘分技能', value: 'yfjn' },
            { label: '奇侠技能', value: 'qxjn' },
            { label: '奇侠品质', value: 'qxpz' },
            { label: '奇侠获得', value: 'qxhd' },
        ]
    },
    {
        label: '商业系统',
        value: 'businessSys',
        children: [
            { label: '商会系统', value: 'shxt' },
            { label: '商城系统', value: 'scxt' },
            { label: '摆摊系统', value: 'btxt' },
        ]
    },
    {
        label: '帮派系统',
        value: 'gangsSys',
        children: [
            { label: '帮派宝库', value: 'bpbk' },
            { label: '帮派强盗', value: 'bpqd' },
            { label: '帮派花灯会', value: 'bphdh' },
            { label: '帮派系统', value: 'bpxt' },
        ]
    },
]

/**
 * 系统介绍
 * @returns 
 */
const SystemIntroduction: React.FC = () => {

    useScrollToTop();

    /*****************************************/
    const [navInfo, setNavInfo] = useState<{ nav: string, fatherNav: NavListProps }>()
    /*****************************************/

    return <div className="gameIntroduction">
        <OtherHeader
            title='系统介绍'
            navList={navList}
            onChange={(nav, fatherNav) => {
                setNavInfo({ nav, fatherNav })
            }}
        >
            {(navInfo?.nav && navInfo?.fatherNav?.value) && <div className='article-box' dangerouslySetInnerHTML={{ __html: sysJs?.[navInfo?.fatherNav?.value]?.[navInfo?.nav] }} />}
        </OtherHeader>
    </div>
}

export default SystemIntroduction