Compare commits
2 Commits
be79430fc0
...
7b46e3ec79
| Author | SHA1 | Date |
|---|---|---|
 梅航
|
7b46e3ec79 | |
|
梅航
|
dcb857a163 |
345
src/App.tsx
345
src/App.tsx
|
|
@ -1,191 +1,194 @@
|
||||||
|
import {useEffect, useRef, useState} from "react";
|
||||||
import { useEffect, useState, useRef } from "react";
|
|
||||||
import '@/utils/styles/App.scss'
|
import '@/utils/styles/App.scss'
|
||||||
import { Route, Routes, useNavigate, Navigate, useLocation } from 'react-router-dom';
|
import {Navigate, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
|
||||||
import Home from '@/page/Home/index'
|
import Home from '@/page/Home/index'
|
||||||
import Index from '@/page/Home/Index/index'
|
import Index from '@/page/Home/Index/index'
|
||||||
import User from '@/page/Home/User/index'
|
import User from '@/page/Home/User/index'
|
||||||
import Login from '@/page/Login/index'
|
import Login from '@/page/Login/index'
|
||||||
import Meeting from '@/page/Meeting/index'
|
import Meeting from '@/page/Meeting/index'
|
||||||
import NotFound from '@/page/NotFound/index'
|
import NotFound from '@/page/NotFound/index'
|
||||||
import { storage } from '@/utils'
|
import {storage} from '@/utils'
|
||||||
import { Spin, message } from "antd";
|
import {message, Spin} from "antd";
|
||||||
import { onInvitation, onInvoke, onReconnected, onStart } from "@/utils/package/signalr";
|
import {onInvitation, onInvoke, onReconnected, onStart, startSignalr} from "@/utils/package/signalr";
|
||||||
import JoinMeetingModal from "@/components/JoinMeetingModal";
|
import JoinMeetingModal from "@/components/JoinMeetingModal";
|
||||||
import UpdateModal from "@/components/UpdateModal";
|
import UpdateModal from "@/components/UpdateModal";
|
||||||
import * as CryptoJS from 'crypto-js';
|
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 agora from "@/utils/package/agora";
|
||||||
import QuitTips from "@/components/QuitTips";
|
import QuitTips from "@/components/QuitTips";
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { state } = useLocation();
|
const {state} = useLocation();
|
||||||
const joinMeetingModalRef = useRef<any>();
|
const joinMeetingModalRef = useRef<any>();
|
||||||
const updateModalRef = useRef<any>();
|
const updateModalRef = useRef<any>();
|
||||||
const quitTipsRef = useRef<any>();
|
const quitTipsRef = useRef<any>();
|
||||||
const [_windowSize, setWindowSize] = useState({
|
const [_windowSize, setWindowSize] = useState({
|
||||||
width: window.innerWidth,
|
width: window.innerWidth,
|
||||||
height: window.innerHeight,
|
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;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}, [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 {
|
const [spinning, setSpinning] = useState(false);
|
||||||
window.electron.getIsMaximized().then((res: boolean) => {
|
const [isState, setIsState] = useState(true);
|
||||||
const dom = document.getElementById('root') as HTMLElement;
|
useEffect(() => {
|
||||||
dom.style.borderRadius = res ? '0px' : '10px'
|
function toLogin() {
|
||||||
})
|
try {
|
||||||
} catch { }
|
window.electron.setMainWindowSize({
|
||||||
};
|
width: 752,
|
||||||
const handleCustomStorageChange = (e: any): void => {
|
height: 520,
|
||||||
if (e.key === 'loading') {
|
key: 'login'
|
||||||
setSpinning(Boolean(e.value))
|
})
|
||||||
}
|
} catch {
|
||||||
};
|
}
|
||||||
|
storage.removeItem('user')
|
||||||
|
navigate('/login')
|
||||||
|
}
|
||||||
|
|
||||||
const handleNetworkChange = (): void => {
|
function toHome() {
|
||||||
if (location.hash.indexOf('/meeting') === -1) {
|
try {
|
||||||
if (navigator.onLine) {
|
window.electron.setMainWindowSize({
|
||||||
message.success('网络已恢复。')
|
width: 1200,
|
||||||
setTimeout(async () => {
|
height: 800,
|
||||||
await onStart()
|
})
|
||||||
}, 1000)
|
} catch {
|
||||||
} else {
|
}
|
||||||
message.error('网络已断开!')
|
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((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('网络已断开!')
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
return (
|
||||||
return (
|
<>
|
||||||
<>
|
<Routes>
|
||||||
<Routes>
|
<Route path='/' element={<Home/>}/>
|
||||||
<Route path='/' element={<Home />} />
|
<Route path='/home' element={<Home/>}>
|
||||||
<Route path='/home' element={<Home />}>
|
<Route path='/home' element={<Navigate to='/home/index'/>}/>
|
||||||
<Route path='/home' element={<Navigate to='/home/index' />} />
|
<Route path='/home/index' element={<Index/>}/>
|
||||||
<Route path='/home/index' element={<Index />} />
|
<Route path='/home/user' element={<User/>}/>
|
||||||
<Route path='/home/user' element={<User />} />
|
</Route>
|
||||||
</Route>
|
<Route path='/login' element={<Login/>}/>
|
||||||
<Route path='/login' element={<Login />} />
|
<Route path='/meeting' element={<Meeting/>}/>
|
||||||
<Route path='/meeting' element={<Meeting />} />
|
<Route path='*' element={<NotFound/>}/>
|
||||||
<Route path='*' element={<NotFound />} />
|
</Routes>
|
||||||
</Routes>
|
<Spin spinning={spinning} fullscreen/>
|
||||||
<Spin spinning={spinning} fullscreen />
|
<JoinMeetingModal ref={joinMeetingModalRef}/>
|
||||||
<JoinMeetingModal ref={joinMeetingModalRef} />
|
<UpdateModal ref={updateModalRef}/>
|
||||||
<UpdateModal ref={updateModalRef} />
|
<QuitTips ref={quitTipsRef}/>
|
||||||
<QuitTips ref={quitTipsRef} />
|
</>
|
||||||
</>
|
)
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App
|
export default App
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue