| 1 | import Icon, { |
| 2 | InfoCircleOutlined, |
| 3 | CloudSyncOutlined, |
| 4 | LogoutOutlined, |
| 5 | UserOutlined, |
| 6 | PhoneOutlined, |
| 7 | IdcardOutlined, |
| 8 | WalletOutlined, |
| 9 | } from '@ant-design/icons'; |
| 10 | import { Image, MenuProps } from 'antd'; |
| 11 | import { Button, Dropdown } from 'antd'; |
| 12 | import React, { useEffect, useState } from 'react'; |
| 13 | import Update from '@/components/update'; |
| 14 | import { useUserStore } from '@/store/user'; |
| 15 | import { ipcAppInfo } from '@/icp/app'; |
| 16 | import styles from './sysMenu.module.scss'; |
| 17 | import defaultAvatar from '@/assets/user/defaultAvatar.jpg'; |
| 18 | import Updatelog from '../UpdateLog'; |
| 19 | import Feedback from '@/assets/svgs/user/feedback.svg?react'; |
| 20 | import { useNavigate } from 'react-router-dom'; |
| 21 | |
| 22 | const App: React.FC = () => { |
| 23 | const [appInfo, setAppInfo] = useState<{ version: string }>({ |
| 24 | version: '', |
| 25 | }); |
| 26 | const userStore = useUserStore(); |
| 27 | const navigate = useNavigate(); |
| 28 | |
| 29 | async function getAppInfo() { |
| 30 | const res = await ipcAppInfo(); |
| 31 | setAppInfo(res); |
| 32 | } |
| 33 | |
| 34 | useEffect(() => { |
| 35 | getAppInfo(); |
| 36 | }, []); |
| 37 | |
| 38 | const items: MenuProps['items'] = [ |
| 39 | // { |
| 40 | // key: 'userInfo', |
| 41 | // label: ( |
| 42 | // <div className="px-2 py-2"> |
| 43 | // <div className="flex items-center space-x-2 mb-2"> |
| 44 | // <UserOutlined className="text-[#a66ae4]" /> |
| 45 | // <span className="text-gray-600">用户名：</span> |
| 46 | // <span className="text-gray-900 font-medium"> |
| 47 | // {userStore.userInfo?.name || '-'} |
| 48 | // </span> |
| 49 | // </div> |
| 50 | // <div className="flex items-center space-x-2 mb-2"> |
| 51 | // <IdcardOutlined className="text-[#a66ae4]" /> |
| 52 | // <span className="text-gray-600">ID：</span> |
| 53 | // <span className="text-gray-900 font-medium"> |
| 54 | // {userStore.userInfo?.id || '-'} |
| 55 | // </span> |
| 56 | // </div> |
| 57 | // <div className="flex items-center space-x-2"> |
| 58 | // <PhoneOutlined className="text-[#a66ae4]" /> |
| 59 | // <span className="text-gray-600">手机：</span> |
| 60 | // <span className="text-gray-900 font-medium"> |
| 61 | // {userStore.userInfo?.phone || '-'} |
| 62 | // </span> |
| 63 | // </div> |
| 64 | // </div> |
| 65 | // ), |
| 66 | // }, |
| 67 | // { |
| 68 | // type: 'divider', |
| 69 | // }, |
| 70 | { |
| 71 | key: 'wallet', |
| 72 | label: ( |
| 73 | <Button |
| 74 | type="text" |
| 75 | className="w-full text-left pl-0" |
| 76 | onClick={() => { |
| 77 | navigate('/finance/userWalletAccount'); |
| 78 | }} |
| 79 | > |
| 80 | {' '}我的钱包 |
| 81 | </Button> |
| 82 | ), |
| 83 | icon: <WalletOutlined className="text-[#a66ae4]" />, |
| 84 | }, |
| 85 | { |
| 86 | type: 'divider', |
| 87 | }, |
| 88 | { |
| 89 | key: '0', |
| 90 | label: ( |
| 91 | <div className="px-2 py-1 text-center"> |
| 92 | <p className="text-gray-600 mb-0">当前版本 {appInfo.version}</p> |
| 93 | </div> |
| 94 | ), |
| 95 | icon: <InfoCircleOutlined className="text-[#a66ae4]" />, |
| 96 | }, |
| 97 | { |
| 98 | type: 'divider', |
| 99 | }, |
| 100 | { |
| 101 | key: '1', |
| 102 | label: <Update />, |
| 103 | icon: <CloudSyncOutlined className="text-[#a66ae4]" />, |
| 104 | }, |
| 105 | { |
| 106 | type: 'divider', |
| 107 | }, |
| 108 | { |
| 109 | key: '3', |
| 110 | label: <Updatelog />, |
| 111 | icon: <Icon component={Feedback} className="text-[#a66ae4]" />, |
| 112 | }, |
| 113 | { |
| 114 | type: 'divider', |
| 115 | }, |
| 116 | { |
| 117 | key: '2', |
| 118 | label: ( |
| 119 | <Button |
| 120 | type="text" |
| 121 | danger |
| 122 | className="w-full text-left pl-0" |
| 123 | onClick={() => { |
| 124 | userStore.logout(); |
| 125 | }} |
| 126 | > |
| 127 | {' '}退出登录 |
| 128 | </Button> |
| 129 | ), |
| 130 | icon: <LogoutOutlined className="text-red-500" />, |
| 131 | }, |
| 132 | ]; |
| 133 | |
| 134 | return ( |
| 135 | <Dropdown |
| 136 | menu={{ items }} |
| 137 | placement="bottomCenter" |
| 138 | overlayClassName="min-w-[240px]" |
| 139 | overlayStyle={{ marginTop: '8px' }} |
| 140 | > |
| 141 | <div |
| 142 | className={styles.sysMenu} |
| 143 | onClick={() => navigate('/user/mine')} |
| 144 | style={{ cursor: 'pointer' }} |
| 145 | > |
| 146 | <Image className="sysMenu-avatar" src={defaultAvatar} preview={false} /> |
| 147 | </div> |
| 148 | </Dropdown> |
| 149 | ); |
| 150 | }; |
| 151 | |
| 152 | export default App; |
| 153 |