Compare commits

..

No commits in common. "7b46e3ec7967472e474144634a5f9f3c574023c8" and "be79430fc01faede3754c638ebbdb73afe6972fb" have entirely different histories.

1 changed files with 172 additions and 175 deletions

View File

@ -1,194 +1,191 @@
import {useEffect, useRef, useState} from "react";
import { useEffect, useState, useRef } from "react";
import '@/utils/styles/App.scss'
import {Navigate, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
import { Route, Routes, useNavigate, Navigate, useLocation } from 'react-router-dom';
import Home from '@/page/Home/index'
import Index from '@/page/Home/Index/index'
import User from '@/page/Home/User/index'
import Login from '@/page/Login/index'
import Meeting from '@/page/Meeting/index'
import NotFound from '@/page/NotFound/index'
import {storage} from '@/utils'
import {message, Spin} from "antd";
import {onInvitation, onInvoke, onReconnected, onStart, startSignalr} from "@/utils/package/signalr";
import { storage } from '@/utils'
import { Spin, message } from "antd";
import { onInvitation, onInvoke, onReconnected, onStart } from "@/utils/package/signalr";
import JoinMeetingModal from "@/components/JoinMeetingModal";
import UpdateModal from "@/components/UpdateModal";
import * as CryptoJS from 'crypto-js';
import {PostLogin} from "@/api/Login";
import { PostLogin } from "@/api/Login";
import { startSignalr } from '@/utils/package/signalr';
import agora from "@/utils/package/agora";
import QuitTips from "@/components/QuitTips";
const App: React.FC = () => {
const navigate = useNavigate();
const {state} = useLocation();
const joinMeetingModalRef = useRef<any>();
const updateModalRef = useRef<any>();
const quitTipsRef = useRef<any>();
const [_windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
const [spinning, setSpinning] = useState(false);
const [isState, setIsState] = useState(true);
useEffect(() => {
function toLogin() {
try {
window.electron.setMainWindowSize({
width: 752,
height: 520,
key: 'login'
})
} catch {
}
storage.removeItem('user')
navigate('/login')
}
function toHome() {
try {
window.electron.setMainWindowSize({
width: 1200,
height: 800,
})
} catch {
}
navigate('/home')
}
let userInfo = JSON.parse(storage.getItem('user') as string)
let loginInfo = JSON.parse(storage.getItem('login') as string)
if (userInfo) {
if (loginInfo && loginInfo.isAutoLogin) {
PostLogin({
account: loginInfo.account,
pwd: CryptoJS.MD5(loginInfo.password).toString(CryptoJS.enc.Hex)
}).then(res => {
if (res.code === 200) {
storage.setItem('user', JSON.stringify(res.data))
toHome()
startSignalr()
} else {
toLogin()
}
})
} else {
toLogin()
}
} else {
toLogin()
}
if (import.meta.env.VITE_ENV !== 'development') {
document.addEventListener('keydown', (event) => {
if ((event.ctrlKey || event.metaKey) && event.key === 'r') {
event.preventDefault();
}
});
}
window.addEventListener('resize', handleResize);
window.addEventListener('online', handleNetworkChange);
window.addEventListener('offline', handleNetworkChange);
const originalSetItem = window.localStorage.setItem;
window.localStorage.setItem = function (key, value) {
originalSetItem.call(this, key, value);
const event = new Event('customStorageChange') as any;
event.key = key
event.value = value
window.dispatchEvent(event);
};
window.addEventListener('customStorageChange', handleCustomStorageChange);
return () => {
window.removeEventListener('resize', handleResize);
window.removeEventListener('customStorageChange', handleCustomStorageChange);
window.removeEventListener('online', handleNetworkChange);
window.removeEventListener('offline', handleNetworkChange);
};
}, []);
useEffect(() => {
onInvitation((item: any) => {
switch (item.key) {
case 'Invitation':
window.electron.joinNotification({
body: item.roomName,
name: item.InviterName,
})
joinMeetingModalRef.current.changeModal(item)
break;
}
const navigate = useNavigate();
const { state } = useLocation();
const joinMeetingModalRef = useRef<any>();
const updateModalRef = useRef<any>();
const quitTipsRef = useRef<any>();
const [_windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
const [spinning, setSpinning] = useState(false);
const [isState, setIsState] = useState(true);
useEffect(() => {
function toLogin() {
try {
window.electron.setMainWindowSize({
width: 752,
height: 520,
key: 'login'
})
}, [navigate])
useEffect(() => {
onReconnected(async () => {
storage.setItem('reconnect', true)
})
window.electron.onUpdate((e: any, data: any) => {
updateModalRef.current.changeModal(data)
})
}, [])
useEffect(() => {
if (isState) {
setIsState(false)
window.electron.onQuit(async () => {
if (location.hash.indexOf('/meeting') !== -1) {
const data = JSON.parse(localStorage.stateInfo);
await onInvoke('levelChannel', {
roomNum: data.channelId
})
await agora.leaveChannel()
}
})
}
storage.setItem('stateInfo', JSON.stringify(state))
}, [state])
const handleResize = (): void => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
try {
window.electron.getIsMaximized().then((res: boolean) => {
const dom = document.getElementById('root') as HTMLElement;
dom.style.borderRadius = res ? '0px' : '10px'
})
} catch {
}
};
const handleCustomStorageChange = (e: any): void => {
if (e.key === 'loading') {
setSpinning(Boolean(e.value))
}
};
const handleNetworkChange = (): void => {
if (location.hash.indexOf('/meeting') === -1) {
if (navigator.onLine) {
message.success('网络已恢复。')
setTimeout(async () => {
await onStart()
}, 1000)
} else {
message.error('网络已断开!')
}
}
} catch { }
storage.removeItem('user')
navigate('/login')
}
return (
<>
<Routes>
<Route path='/' element={<Home/>}/>
<Route path='/home' element={<Home/>}>
<Route path='/home' element={<Navigate to='/home/index'/>}/>
<Route path='/home/index' element={<Index/>}/>
<Route path='/home/user' element={<User/>}/>
</Route>
<Route path='/login' element={<Login/>}/>
<Route path='/meeting' element={<Meeting/>}/>
<Route path='*' element={<NotFound/>}/>
</Routes>
<Spin spinning={spinning} fullscreen/>
<JoinMeetingModal ref={joinMeetingModalRef}/>
<UpdateModal ref={updateModalRef}/>
<QuitTips ref={quitTipsRef}/>
</>
)
function toHome() {
try {
window.electron.setMainWindowSize({
width: 1200,
height: 800,
})
} catch { }
navigate('/home')
}
let userInfo = JSON.parse(storage.getItem('user') as string)
let loginInfo = JSON.parse(storage.getItem('login') as string)
if (userInfo) {
if (loginInfo && loginInfo.isAutoLogin) {
PostLogin({
account: loginInfo.account,
pwd: CryptoJS.MD5(loginInfo.password).toString(CryptoJS.enc.Hex)
}).then(res => {
if (res.code === 200) {
storage.setItem('user', JSON.stringify(res.data))
toHome()
startSignalr()
} else {
toLogin()
}
})
} else {
toLogin()
}
} else {
toLogin()
}
if (import.meta.env.VITE_ENV !== 'development') {
document.addEventListener('keydown', (event) => {
if ((event.ctrlKey || event.metaKey) && event.key === 'r') {
event.preventDefault();
}
});
}
window.addEventListener('resize', handleResize);
window.addEventListener('online', handleNetworkChange);
window.addEventListener('offline', handleNetworkChange);
const originalSetItem = window.localStorage.setItem;
window.localStorage.setItem = function (key, value) {
originalSetItem.call(this, key, value);
const event = new Event('customStorageChange') as any;
event.key = key
event.value = value
window.dispatchEvent(event);
};
window.addEventListener('customStorageChange', handleCustomStorageChange);
return () => {
window.removeEventListener('resize', handleResize);
window.removeEventListener('customStorageChange', handleCustomStorageChange);
window.removeEventListener('online', handleNetworkChange);
window.removeEventListener('offline', handleNetworkChange);
};
}, []);
useEffect(() => {
onInvitation((item: any) => {
switch (item.key) {
case 'Invitation':
window.electron.joinNotification({
body: item.roomName,
name: item.InviterName,
})
joinMeetingModalRef.current.changeModal(item)
break;
}
})
}, [navigate])
useEffect(() => {
onReconnected(async () => {
storage.setItem('reconnect', true)
})
window.electron.onUpdate((data: any) => {
updateModalRef.current.changeModal(data)
})
}, [])
useEffect(() => {
if (isState) {
setIsState(false)
window.electron.onQuit(async () => {
if (location.hash.indexOf('/meeting') !== -1) {
const data = JSON.parse(localStorage.stateInfo);
await onInvoke('levelChannel', {
roomNum: data.channelId
})
await agora.leaveChannel()
}
})
}
storage.setItem('stateInfo', JSON.stringify(state))
}, [state])
const handleResize = (): void => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
try {
window.electron.getIsMaximized().then((res: boolean) => {
const dom = document.getElementById('root') as HTMLElement;
dom.style.borderRadius = res ? '0px' : '10px'
})
} catch { }
};
const handleCustomStorageChange = (e: any): void => {
if (e.key === 'loading') {
setSpinning(Boolean(e.value))
}
};
const handleNetworkChange = (): void => {
if (location.hash.indexOf('/meeting') === -1) {
if (navigator.onLine) {
message.success('网络已恢复。')
setTimeout(async () => {
await onStart()
}, 1000)
} else {
message.error('网络已断开!')
}
}
}
return (
<>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/home' element={<Home />}>
<Route path='/home' element={<Navigate to='/home/index' />} />
<Route path='/home/index' element={<Index />} />
<Route path='/home/user' element={<User />} />
</Route>
<Route path='/login' element={<Login />} />
<Route path='/meeting' element={<Meeting />} />
<Route path='*' element={<NotFound />} />
</Routes>
<Spin spinning={spinning} fullscreen />
<JoinMeetingModal ref={joinMeetingModalRef} />
<UpdateModal ref={updateModalRef} />
<QuitTips ref={quitTipsRef} />
</>
)
}
export default App