161 lines
4.4 KiB
TypeScript
161 lines
4.4 KiB
TypeScript
import styles from '@/page/Home/index.module.scss'
|
||
import { useEffect, useState } from "react";
|
||
import { Outlet, useNavigate } from 'react-router-dom';
|
||
import { Popconfirm } from 'antd';
|
||
import dayjs from 'dayjs';
|
||
import 'dayjs/locale/zh-cn'
|
||
import { storage } from '@/utils';
|
||
import ImageUrl from '@/utils/package/ImageUrl'
|
||
import Avatar from '@/components/Avatar';
|
||
dayjs.locale('zh-cn');
|
||
type navListType = {
|
||
title: string;
|
||
icon: string;
|
||
iconActive: string;
|
||
path: string;
|
||
isHover: boolean;
|
||
isActive: boolean;
|
||
}
|
||
|
||
const Home: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
const [navList, setNavList] = useState<navListType[]>([
|
||
{
|
||
title: '首页',
|
||
icon: ImageUrl.icon12,
|
||
iconActive: ImageUrl.icon12Active,
|
||
isHover: false,
|
||
isActive: true,
|
||
path: '/home/index'
|
||
},
|
||
{
|
||
title: '人员',
|
||
icon: ImageUrl.icon13,
|
||
iconActive: ImageUrl.icon13Active,
|
||
isHover: false,
|
||
isActive: false,
|
||
path: '/home/user'
|
||
},
|
||
]);
|
||
const [userInfo, setUserInfo] = useState<any>({})
|
||
const [dateInfo, setDateInfo] = useState<{
|
||
work: string;
|
||
time: string;
|
||
specific: string;
|
||
}>({
|
||
work: '',
|
||
time: '',
|
||
specific: '',
|
||
})
|
||
useEffect(() => {
|
||
const user = JSON.parse(storage.getItem('user') as string);
|
||
setUserInfo(user)
|
||
const updateTime = () => {
|
||
setDateInfo({
|
||
work: dayjs().format('ddd'),
|
||
time: dayjs().format('HH:mm'),
|
||
specific: dayjs().format('YYYY/MM/DD')
|
||
})
|
||
};
|
||
const timer = setInterval(updateTime, 1000);
|
||
return () => {
|
||
clearInterval(timer);
|
||
};
|
||
}, []);
|
||
|
||
const changtNavList = (index: number, bool?: boolean): void => {
|
||
const newNavList = [...navList];
|
||
if (typeof bool === 'boolean') {
|
||
newNavList[index].isHover = bool;
|
||
} else {
|
||
newNavList.forEach((item) => {
|
||
item.isActive = false;
|
||
})
|
||
newNavList[index].isActive = true;
|
||
navigate(newNavList[index].path)
|
||
}
|
||
setNavList(newNavList)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<div className={styles.home}>
|
||
<div className={styles.homeLeft}>
|
||
<div className='drag'>
|
||
<div>
|
||
<Avatar name={userInfo.userName} />
|
||
</div>
|
||
<span>欢迎您，{userInfo.userName}</span>
|
||
</div>
|
||
<div>
|
||
<img src={ImageUrl.icon14} alt="" />
|
||
<div>
|
||
<div>
|
||
<span>{dateInfo.time}</span>
|
||
<span>{dateInfo.work}</span>
|
||
</div>
|
||
<div>{dateInfo.specific}</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
{navList.map((item: navListType, index: number) => {
|
||
return (
|
||
<div
|
||
key={index}
|
||
className={`${item.isActive ? styles.active : ''} drag`}
|
||
title={item.title}
|
||
onMouseLeave={() => changtNavList(index, false)}
|
||
onMouseEnter={() => changtNavList(index, true)}
|
||
onClick={() => changtNavList(index)}>
|
||
<div>
|
||
{item.isHover || item.isActive ?
|
||
<img src={item.iconActive} alt="" /> :
|
||
<img src={item.icon} alt="" />}
|
||
</div>
|
||
<span>{item.title}</span>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
<div>
|
||
<div className='drag' title='设置'>
|
||
<div></div>
|
||
<span>设置</span>
|
||
</div>
|
||
<Popconfirm
|
||
title="提示"
|
||
description="确认退出吗？"
|
||
onConfirm={() => {
|
||
try {
|
||
window.electron.setMainWindowSize({
|
||
width: 752,
|
||
height: 520,
|
||
key: 'login'
|
||
})
|
||
} catch {
|
||
|
||
}
|
||
navigate('/login')
|
||
storage.removeItem('user')
|
||
}}
|
||
onCancel={() => {
|
||
|
||
}}
|
||
okText="确认"
|
||
cancelText="取消"
|
||
>
|
||
<div className='drag' title='退出'>
|
||
<div></div>
|
||
<span>退出</span>
|
||
</div>
|
||
</Popconfirm>
|
||
</div>
|
||
</div>
|
||
<div className={styles.homeRight}>
|
||
<Outlet></Outlet>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
export default Home |