WGShare.Client.Electron/src/page/Home/index.tsx

import styles from '@/page/Home/index.module.scss'
import { useEffect, useState, useRef } 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';
import StupWizard from '@/components/StupWizard';
dayjs.locale('zh-cn');
type navListType = {
  title: string;
  icon: string;
  iconActive: string;
  path: string;
  isHover: boolean;
  isActive: boolean;
  isShow: boolean;
}
const Home: React.FC = () => {
  const user = JSON.parse(storage.getItem('user') as string);
  const navigate = useNavigate();
  const stupWizardRef = useRef<any>();
  const [navList, setNavList] = useState<navListType[]>([
    {
      title: '首页',
      icon: ImageUrl.icon12,
      iconActive: ImageUrl.icon12Active,
      isHover: false,
      isActive: true,
      isShow: true,
      path: '/home/index'
    },
    {
      title: '人员',
      icon: ImageUrl.icon13,
      iconActive: ImageUrl.icon13Active,
      isHover: false,
      isActive: false,
      isShow: user?.roleId === '1' ? true : false,
      path: '/home/user'
    },
  ]);
  const [userInfo, setUserInfo] = useState<any>({})
  const [version, setVersion] = useState<string>('')
  const [dateInfo, setDateInfo] = useState<{
    work: string;
    time: string;
    specific: string;
  }>({
    work: '',
    time: '',
    specific: '',
  })
  useEffect(() => {
    setUserInfo(user)
    window.electron.getVersion().then(res => {
      setVersion(res)
    })
    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 (
                item.isShow ? <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> : null
              )
            })}
          </div>
          <div>
            版本号：{version}
          </div>
          <div>
            <div className='drag' title='设置' onClick={() => {
              stupWizardRef.current.changeModal()
            }}>
              <div></div>
              <span>设置</span>
            </div>
            <Popconfirm
              title="提示"
              description="确认退出吗？"
              onConfirm={() => {
                storage.removeItem('user')
                storage.setItem('userLogin', false)
              }}
              onCancel={() => {

              }}
              okText="确认"
              cancelText="取消"
            >
              <div className='drag' title='退出'>
                <div></div>
                <span>退出</span>
              </div>
            </Popconfirm>
          </div>
        </div>
        <div className={styles.homeRight}>
          <Outlet></Outlet>
        </div>
      </div>
      <StupWizard ref={stupWizardRef} />
    </>
  )
}
export default Home