添加 react-router, 使 CallackError 获得更多成员, 导出, (WIP) 图片查看器修改, 修复遗忘的 data.apply()
This commit is contained in:
CrescentLeaf
@@ -1,104 +1,146 @@
|
||||
import isMobileUI from "../utils/isMobileUI.ts"
|
||||
import useEventListener from "../utils/useEventListener.ts"
|
||||
import AvatarMySelf from "./AvatarMySelf.tsx"
|
||||
import MainSharedContext from './MainSharedContext.ts'
|
||||
import React from "react"
|
||||
import { BrowserRouter, Outlet, Route, Routes } from "react-router"
|
||||
import LoginDialog from "./main-page/LoginDialog.tsx"
|
||||
import useAsyncEffect from "../utils/useAsyncEffect.ts"
|
||||
import performAuth from "../performAuth.ts"
|
||||
import { CallbackError } from "lingchair-client-protocol"
|
||||
|
||||
export default function Main() {
|
||||
const [showLoginDialog, setShowLoginDialog] = React.useState(false)
|
||||
|
||||
// 多页面切换
|
||||
const navigationRef = React.useRef<HTMLElement>()
|
||||
const [currentShowPage, setCurrentShowPage] = React.useState('Recents')
|
||||
type HTMLElementWithValue = HTMLElement & { value: string }
|
||||
useEventListener(navigationRef, 'change', (event) => {
|
||||
setCurrentShowPage((event.target as HTMLElementWithValue).value)
|
||||
})
|
||||
|
||||
const sharedContext = {
|
||||
openChatFragment: React.useRef()
|
||||
ui_functions: React.useRef({
|
||||
|
||||
}),
|
||||
setShowLoginDialog,
|
||||
}
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
try {
|
||||
await performAuth({})
|
||||
} catch (e) {
|
||||
if (e instanceof CallbackError)
|
||||
if (e.code == 401 || e.code == 400)
|
||||
setShowLoginDialog(true)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<MainSharedContext.Provider value={sharedContext}>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
position: 'relative',
|
||||
width: 'calc(var(--whitesilk-window-width) - 80px)',
|
||||
height: 'var(--whitesilk-window-height)',
|
||||
}}>
|
||||
{
|
||||
/**
|
||||
* Default: 侧边列表提供列表切换
|
||||
*/
|
||||
!isMobileUI() ?
|
||||
<mdui-navigation-rail contained value="Recents">
|
||||
<mdui-button-icon slot="top">
|
||||
<AvatarMySelf />
|
||||
</mdui-button-icon>
|
||||
|
||||
<mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
|
||||
<mdui-navigation-rail-item icon="favorite_border" active-icon="favorite" value="Contacts"></mdui-navigation-rail-item>
|
||||
<mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
|
||||
|
||||
|
||||
<mdui-dropdown trigger="hover" slot="bottom">
|
||||
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
|
||||
<mdui-menu>
|
||||
<mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
|
||||
<mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
|
||||
</mdui-menu>
|
||||
</mdui-dropdown>
|
||||
</mdui-navigation-rail>
|
||||
/**
|
||||
* Mobile: 底部导航栏提供列表切换
|
||||
*/
|
||||
: <mdui-top-app-bar style={{
|
||||
position: 'sticky',
|
||||
marginTop: '3px',
|
||||
marginRight: '6px',
|
||||
marginLeft: '15px',
|
||||
top: '0px',
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={(
|
||||
<div style={{
|
||||
display: "flex",
|
||||
position: 'relative',
|
||||
width: 'calc(var(--whitesilk-window-width) - 80px)',
|
||||
height: 'var(--whitesilk-window-height)',
|
||||
}}>
|
||||
<mdui-top-app-bar-title>{
|
||||
({
|
||||
Recents: "最近对话",
|
||||
Contacts: "收藏对话",
|
||||
AllChats: "所有对话",
|
||||
})['Recents']
|
||||
}</mdui-top-app-bar-title>
|
||||
<div style={{
|
||||
flexGrow: 1,
|
||||
}}></div>
|
||||
<mdui-dropdown trigger="hover">
|
||||
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
|
||||
<mdui-menu>
|
||||
<mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
|
||||
<mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
|
||||
</mdui-menu>
|
||||
</mdui-dropdown>
|
||||
<mdui-button-icon icon="settings"></mdui-button-icon>
|
||||
<mdui-button-icon>
|
||||
<AvatarMySelf />
|
||||
</mdui-button-icon>
|
||||
</mdui-top-app-bar>
|
||||
}
|
||||
{
|
||||
/**
|
||||
* Mobile: 指定高度的容器
|
||||
* Default: 侧边列表
|
||||
*/
|
||||
<div style={isMobileUI() ? {
|
||||
display: 'flex',
|
||||
height: 'calc(100% - 80px - 67px)',
|
||||
width: '100%',
|
||||
} : {}} id="SideBar">
|
||||
{
|
||||
// 将子路由渲染到此处
|
||||
<Outlet />
|
||||
}
|
||||
<LoginDialog open={showLoginDialog} />
|
||||
{
|
||||
/**
|
||||
* Default: 侧边列表提供列表切换
|
||||
*/
|
||||
!isMobileUI() ?
|
||||
<mdui-navigation-rail ref={navigationRef} contained value="Recents">
|
||||
<mdui-button-icon slot="top">
|
||||
<AvatarMySelf />
|
||||
</mdui-button-icon>
|
||||
|
||||
</div>
|
||||
}
|
||||
{
|
||||
/**
|
||||
* Mobile: 底部导航栏提供列表切换
|
||||
* Default: 侧边列表提供列表切换
|
||||
*/
|
||||
isMobileUI() && <mdui-navigation-bar label-visibility="selected" value="Recents" style={{
|
||||
position: 'sticky',
|
||||
bottom: '0',
|
||||
}}>
|
||||
<mdui-navigation-bar-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents">最近对话</mdui-navigation-bar-item>
|
||||
<mdui-navigation-bar-item icon="favorite_border" active-icon="favorite" value="Contacts">收藏对话</mdui-navigation-bar-item>
|
||||
<mdui-navigation-bar-item icon="chat--outlined" active-icon="chat--filled" value="AllChats">全部对话</mdui-navigation-bar-item>
|
||||
</mdui-navigation-bar>
|
||||
}
|
||||
</div>
|
||||
<mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
|
||||
<mdui-navigation-rail-item icon="favorite_border" active-icon="favorite" value="Contacts"></mdui-navigation-rail-item>
|
||||
<mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
|
||||
|
||||
|
||||
<mdui-dropdown trigger="hover" slot="bottom">
|
||||
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
|
||||
<mdui-menu>
|
||||
<mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
|
||||
<mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
|
||||
</mdui-menu>
|
||||
</mdui-dropdown>
|
||||
</mdui-navigation-rail>
|
||||
/**
|
||||
* Mobile: 底部导航栏提供列表切换
|
||||
*/
|
||||
: <mdui-top-app-bar style={{
|
||||
position: 'sticky',
|
||||
marginTop: '3px',
|
||||
marginRight: '6px',
|
||||
marginLeft: '15px',
|
||||
top: '0px',
|
||||
}}>
|
||||
<mdui-top-app-bar-title>{
|
||||
({
|
||||
Recents: "最近对话",
|
||||
Contacts: "收藏对话",
|
||||
AllChats: "所有对话",
|
||||
})['Recents']
|
||||
}</mdui-top-app-bar-title>
|
||||
<div style={{
|
||||
flexGrow: 1,
|
||||
}}></div>
|
||||
<mdui-dropdown trigger="hover">
|
||||
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
|
||||
<mdui-menu>
|
||||
<mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
|
||||
<mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
|
||||
</mdui-menu>
|
||||
</mdui-dropdown>
|
||||
<mdui-button-icon icon="settings"></mdui-button-icon>
|
||||
<mdui-button-icon>
|
||||
<AvatarMySelf />
|
||||
</mdui-button-icon>
|
||||
</mdui-top-app-bar>
|
||||
}
|
||||
{
|
||||
/**
|
||||
* Mobile: 指定高度的容器
|
||||
* Default: 侧边列表
|
||||
*/
|
||||
<div style={isMobileUI() ? {
|
||||
display: 'flex',
|
||||
height: 'calc(100% - 80px - 67px)',
|
||||
width: '100%',
|
||||
} : {}} id="SideBar">
|
||||
|
||||
</div>
|
||||
}
|
||||
{
|
||||
/**
|
||||
* Mobile: 底部导航栏提供列表切换
|
||||
* Default: 侧边列表提供列表切换
|
||||
*/
|
||||
isMobileUI() && <mdui-navigation-bar ref={navigationRef} label-visibility="selected" value="Recents" style={{
|
||||
position: 'sticky',
|
||||
bottom: '0',
|
||||
}}>
|
||||
<mdui-navigation-bar-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents">最近对话</mdui-navigation-bar-item>
|
||||
<mdui-navigation-bar-item icon="favorite_border" active-icon="favorite" value="Contacts">收藏对话</mdui-navigation-bar-item>
|
||||
<mdui-navigation-bar-item icon="chat--outlined" active-icon="chat--filled" value="AllChats">全部对话</mdui-navigation-bar-item>
|
||||
</mdui-navigation-bar>
|
||||
}
|
||||
</div>
|
||||
)}>
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</MainSharedContext.Provider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user