| 1 | import { Menu, MenuProps } from 'antd'; |
| 2 | import styles from './aiTool.module.scss'; |
| 3 | import Ranking from '@/assets/svgs/aiTool/ranking.svg?react'; |
| 4 | import AiDraw from '@/assets/svgs/aiTool/aiDraw.svg?react'; |
| 5 | import FaceFusion from '@/assets/svgs/aiTool/faceFusion.svg?react'; |
| 6 | import DigitalHuman from '@/assets/svgs/aiTool/digitalHuman.svg?react'; |
| 7 | import VideoParse from '@/assets/svgs/aiTool/videoParse.svg?react'; |
| 8 | import CosyVoice from '@/assets/svgs/aiTool/cosyVoice.svg?react'; |
| 9 | import NarratoAI from '@/assets/svgs/aiTool/narratoAI.svg?react'; |
| 10 | import Icon from '@ant-design/icons'; |
| 11 | import { Outlet, useLocation, useNavigate } from 'react-router-dom'; |
| 12 | import { useEffect, useState } from 'react'; |
| 13 | |
| 14 | type MenuItem = Required<MenuProps>['items'][number]; |
| 15 | |
| 16 | const items: MenuItem[] = [ |
| 17 | { |
| 18 | key: '/aiTool/aiRanking', |
| 19 | label: 'AI工具排行榜', |
| 20 | icon: <Icon component={Ranking} />, |
| 21 | }, |
| 22 | { |
| 23 | key: `/aiTool/aiToolWebview?webviewUrl=${encodeURIComponent('https://www.yikart.cn/chat?isHideNav=true&mask=100005#new-chat?mask=100005')}`, |
| 24 | label: '吉卜力版GPT-4o', |
| 25 | icon: <Icon component={AiDraw} />, |
| 26 | }, |
| 27 | { |
| 28 | key: '/aiTool/aiToolWebview?webviewUrl=http://39.100.101.239:6006', |
| 29 | label: '数字人制作 MuseTalk', |
| 30 | icon: <Icon component={DigitalHuman} />, |
| 31 | }, |
| 32 | { |
| 33 | key: '/aiTool/aiToolWebview?webviewUrl=http://39.100.101.239:5043', |
| 34 | label: '在线短视频解析', |
| 35 | icon: <Icon component={VideoParse} />, |
| 36 | }, |
| 37 | { |
| 38 | key: '/aiTool/aiToolWebview?webviewUrl=http://39.100.101.239:5042', |
| 39 | label: 'AI换脸 FaceFusion', |
| 40 | icon: <Icon component={FaceFusion} />, |
| 41 | }, |
| 42 | { |
| 43 | key: '/aiTool/aiToolWebview?webviewUrl=http://39.100.101.239:5046', |
| 44 | label: '声音克隆CosyVoice', |
| 45 | icon: <Icon component={CosyVoice} />, |
| 46 | }, |
| 47 | { |
| 48 | key: '/aiTool/aiToolWebview?webviewUrl=http://39.100.101.239:6007', |
| 49 | label: 'AI解说NarratoAI', |
| 50 | icon: <Icon component={NarratoAI} />, |
| 51 | }, |
| 52 | { |
| 53 | key: '/aiTool/aiToolWebview?webviewUrl=http://39.100.101.239:6008', |
| 54 | label: '一键成片MoneyPrinterTurbo', |
| 55 | icon: <Icon component={NarratoAI} />, |
| 56 | }, |
| 57 | ].map((v) => { |
| 58 | // @ts-ignore |
| 59 | v.label = <span title={v.label}>{v.label}</span>; |
| 60 | return v; |
| 61 | }); |
| 62 | |
| 63 | export default function Page() { |
| 64 | const navigate = useNavigate(); |
| 65 | const location = useLocation(); |
| 66 | const [currChooseRoute, setCurrChooseRoute] = useState<string>(); |
| 67 | |
| 68 | useEffect(() => { |
| 69 | setCurrChooseRoute(location.pathname + location.search + location.hash); |
| 70 | }, [location]); |
| 71 | |
| 72 | return ( |
| 73 | <div className={styles.aiTool}> |
| 74 | <Menu |
| 75 | selectedKeys={[currChooseRoute || '']} |
| 76 | style={{ width: 200 }} |
| 77 | inlineIndent={15} |
| 78 | mode="inline" |
| 79 | items={items} |
| 80 | onClick={(e) => { |
| 81 | navigate(e.key); |
| 82 | }} |
| 83 | /> |
| 84 | <Outlet /> |
| 85 | </div> |
| 86 | ); |
| 87 | } |
| 88 |