Compare commits
3 Commits
28215fc1f8
...
e22d99d04f
| Author | SHA1 | Date | |
|---|---|---|---|
|
e22d99d04f | ||
|
|
a6ddb9025a | ||
|
|
bf1551c6c3 |
@@ -3,7 +3,7 @@ import useEventListener from "../utils/useEventListener.ts"
|
||||
import AvatarMySelf from "./AvatarMySelf.tsx"
|
||||
import MainSharedContext from './MainSharedContext.ts'
|
||||
import * as React from 'react'
|
||||
import { BrowserRouter, Link, Outlet, Route, Routes, useNavigate } from "react-router"
|
||||
import { BrowserRouter, createBrowserRouter, Link, Outlet, Route, RouterProvider, Routes } from "react-router"
|
||||
import LoginDialog from "./main-page/LoginDialog.tsx"
|
||||
import useAsyncEffect from "../utils/useAsyncEffect.ts"
|
||||
import performAuth from "../performAuth.ts"
|
||||
@@ -18,24 +18,7 @@ import AllChatsList from "./main-page/AllChatsList.tsx"
|
||||
import FavouriteChatsList from "./main-page/FavouriteChatsList.tsx"
|
||||
import AddFavourtieChatDialog from "./main-page/AddFavourtieChatDialog.tsx"
|
||||
import RecentChatsList from "./main-page/RecentChatsList.tsx"
|
||||
import ChatInfoDialog from "./routers/ChatInfoDialog.tsx"
|
||||
|
||||
function Test() {
|
||||
const nav = useNavigate()
|
||||
const dialogRef = React.useRef<Dialog>()
|
||||
useAsyncEffect(async () => {
|
||||
await sleep(10)
|
||||
dialogRef.current!.open = true
|
||||
dialogRef.current!.addEventListener('overlay-click', () => {
|
||||
dialogRef.current!.open = false
|
||||
})
|
||||
dialogRef.current!.addEventListener('closed', async () => {
|
||||
await sleep(100)
|
||||
nav(-1)
|
||||
})
|
||||
}, [])
|
||||
return <mdui-dialog ref={dialogRef}></mdui-dialog>
|
||||
}
|
||||
import UserOrChatInfoDialog from "./routers/UserOrChatInfoDialog.tsx"
|
||||
|
||||
export default function Main() {
|
||||
const [myProfileCache, setMyProfileCache] = React.useState<UserMySelf>()
|
||||
@@ -111,133 +94,132 @@ export default function Main() {
|
||||
waitingForAuth.open = false
|
||||
})
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<MainSharedContext.Provider value={sharedContext}>
|
||||
<Routes>
|
||||
<Route path="/" element={(
|
||||
<div style={{
|
||||
display: "flex",
|
||||
position: 'relative',
|
||||
flexDirection: isMobileUI() ? 'column' : 'row',
|
||||
width: `calc(var(--whitesilk-window-width))${isMobileUI() ? '' : ' - 80px'}`,
|
||||
height: 'var(--whitesilk-window-height)',
|
||||
}}>
|
||||
{
|
||||
// 将子路由渲染到此处
|
||||
<Outlet />
|
||||
}
|
||||
<LoginDialog open={showLoginDialog} />
|
||||
<RegisterDialog open={showRegisterDialog} />
|
||||
<AddFavourtieChatDialog open={showAddFavourtieChatDialog} />
|
||||
<mdui-navigation-drawer ref={drawerRef} modal close-on-esc close-on-overlay-click>
|
||||
<mdui-list style={{
|
||||
padding: '10px',
|
||||
}}>
|
||||
<mdui-list-item rounded>
|
||||
<span>{myProfileCache?.getNickName()}</span>
|
||||
<AvatarMySelf slot="icon" />
|
||||
</mdui-list-item>
|
||||
<mdui-list-item rounded icon="manage_accounts">账号设置</mdui-list-item>
|
||||
<mdui-divider style={{
|
||||
margin: '10px',
|
||||
}}></mdui-divider>
|
||||
<mdui-list-item rounded icon="person_add">添加收藏对话</mdui-list-item>
|
||||
<mdui-list-item rounded icon="group_add">创建新的群组</mdui-list-item>
|
||||
<Link to="/info/user?id=0960bd15-4527-4000-97a8-73110160296f"><mdui-list-item rounded icon="group_add">我是测试</mdui-list-item></Link>
|
||||
<Link to="/info/chat?id=priv_0960bd15_4527_4000_97a8_73110160296f__0960bd15_4527_4000_97a8_73110160296f"><mdui-list-item rounded icon="group_add">我是测试2</mdui-list-item></Link>
|
||||
</mdui-list>
|
||||
<div style={{
|
||||
flexGrow: 1,
|
||||
}}></div>
|
||||
<span style={{
|
||||
padding: '10px',
|
||||
fontSize: 'small',
|
||||
}}>
|
||||
LingChair Web v{__APP_VERSION__}<br />
|
||||
Build: <a href={`https://codeberg.org/CrescentLeaf/LingChair/src/commit/${__GIT_HASH_FULL__}`}>{__GIT_HASH__}</a> ({__BUILD_TIME__})<br />
|
||||
在 Codeberg 上<a href="https://codeberg.org/CrescentLeaf/LingChair">查看源代码</a>
|
||||
</span>
|
||||
</mdui-navigation-drawer>
|
||||
{
|
||||
/**
|
||||
* Default: 侧边列表提供列表切换
|
||||
*/
|
||||
!isMobileUI() ?
|
||||
<mdui-navigation-rail ref={navigationRef} contained value="Recents">
|
||||
<mdui-button-icon slot="top" icon="menu" onClick={() => drawerRef.current!.open = true}></mdui-button-icon>
|
||||
const Root = (
|
||||
<MainSharedContext.Provider value={sharedContext}>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
position: 'relative',
|
||||
flexDirection: isMobileUI() ? 'column' : 'row',
|
||||
width: `calc(var(--whitesilk-window-width))${isMobileUI() ? '' : ' - 80px'}`,
|
||||
height: 'var(--whitesilk-window-height)',
|
||||
}}>
|
||||
{
|
||||
// 将子路由渲染到此处
|
||||
<Outlet />
|
||||
}
|
||||
<LoginDialog open={showLoginDialog} />
|
||||
<RegisterDialog open={showRegisterDialog} />
|
||||
<AddFavourtieChatDialog open={showAddFavourtieChatDialog} />
|
||||
<mdui-navigation-drawer ref={drawerRef} modal close-on-esc close-on-overlay-click>
|
||||
<mdui-list style={{
|
||||
padding: '10px',
|
||||
}}>
|
||||
<mdui-list-item rounded>
|
||||
<span>{myProfileCache?.getNickName()}</span>
|
||||
<AvatarMySelf slot="icon" />
|
||||
</mdui-list-item>
|
||||
<mdui-list-item rounded icon="manage_accounts">账号设置</mdui-list-item>
|
||||
<mdui-divider style={{
|
||||
margin: '10px',
|
||||
}}></mdui-divider>
|
||||
<mdui-list-item rounded icon="person_add">添加收藏对话</mdui-list-item>
|
||||
<mdui-list-item rounded icon="group_add">创建新的群组</mdui-list-item>
|
||||
<Link to="/info/user?id=0960bd15-4527-4000-97a8-73110160296f"><mdui-list-item rounded icon="group_add">我是测试</mdui-list-item></Link>
|
||||
<Link to="/info/chat?id=priv_0960bd15_4527_4000_97a8_73110160296f__0960bd15_4527_4000_97a8_73110160296f"><mdui-list-item rounded icon="group_add">我是测试2</mdui-list-item></Link>
|
||||
</mdui-list>
|
||||
<div style={{
|
||||
flexGrow: 1,
|
||||
}}></div>
|
||||
<span style={{
|
||||
padding: '10px',
|
||||
fontSize: 'small',
|
||||
}}>
|
||||
LingChair Web v{__APP_VERSION__}<br />
|
||||
Build: <a href={`https://codeberg.org/CrescentLeaf/LingChair/src/commit/${__GIT_HASH_FULL__}`}>{__GIT_HASH__}</a> ({__BUILD_TIME__})<br />
|
||||
在 Codeberg 上<a href="https://codeberg.org/CrescentLeaf/LingChair">查看源代码</a>
|
||||
</span>
|
||||
</mdui-navigation-drawer>
|
||||
{
|
||||
/**
|
||||
* Default: 侧边列表提供列表切换
|
||||
*/
|
||||
!isMobileUI() ?
|
||||
<mdui-navigation-rail ref={navigationRef} contained value="Recents">
|
||||
<mdui-button-icon slot="top" icon="menu" onClick={() => drawerRef.current!.open = true}></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="Favourites"></mdui-navigation-rail-item>
|
||||
<mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
|
||||
</mdui-navigation-rail>
|
||||
/**
|
||||
* Mobile: 底部导航栏提供列表切换
|
||||
*/
|
||||
: <mdui-top-app-bar style={{
|
||||
position: 'sticky',
|
||||
marginTop: '3px',
|
||||
marginRight: '6px',
|
||||
marginLeft: '15px',
|
||||
top: '0px',
|
||||
}}>
|
||||
<mdui-button-icon icon="menu" onClick={() => drawerRef.current!.open = true}></mdui-button-icon>
|
||||
<mdui-top-app-bar-title>{
|
||||
({
|
||||
Recents: "最近对话",
|
||||
Favourites: "收藏对话",
|
||||
AllChats: "所有对话",
|
||||
})[currentShowPage]
|
||||
}</mdui-top-app-bar-title>
|
||||
<div style={{
|
||||
flexGrow: 1,
|
||||
}}></div>
|
||||
</mdui-top-app-bar>
|
||||
}
|
||||
{
|
||||
/**
|
||||
* Mobile: 指定高度的容器
|
||||
* Default: 侧边列表
|
||||
*/
|
||||
<div style={isMobileUI() ? {
|
||||
display: 'flex',
|
||||
height: 'calc(100% - 80px - 67px)',
|
||||
width: '100%',
|
||||
} : {}} id="SideBar">
|
||||
<RecentChatsList style={{
|
||||
display: currentShowPage == 'Recents' ? undefined : 'none'
|
||||
}} />
|
||||
<FavouriteChatsList style={{
|
||||
display: currentShowPage == 'Favourites' ? undefined : 'none'
|
||||
}} />
|
||||
<AllChatsList style={{
|
||||
display: currentShowPage == 'AllChats' ? undefined : 'none'
|
||||
}} />
|
||||
</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="Favourites">收藏对话</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 path="info">
|
||||
<Route path="chat" element={<Test />} />
|
||||
<Route path="user" element={<ChatInfoDialog />} />
|
||||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
</MainSharedContext.Provider>
|
||||
</BrowserRouter>
|
||||
<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="Favourites"></mdui-navigation-rail-item>
|
||||
<mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
|
||||
</mdui-navigation-rail>
|
||||
/**
|
||||
* Mobile: 底部导航栏提供列表切换
|
||||
*/
|
||||
: <mdui-top-app-bar style={{
|
||||
position: 'sticky',
|
||||
marginTop: '3px',
|
||||
marginRight: '6px',
|
||||
marginLeft: '15px',
|
||||
top: '0px',
|
||||
}}>
|
||||
<mdui-button-icon icon="menu" onClick={() => drawerRef.current!.open = true}></mdui-button-icon>
|
||||
<mdui-top-app-bar-title>{
|
||||
({
|
||||
Recents: "最近对话",
|
||||
Favourites: "收藏对话",
|
||||
AllChats: "所有对话",
|
||||
})[currentShowPage]
|
||||
}</mdui-top-app-bar-title>
|
||||
<div style={{
|
||||
flexGrow: 1,
|
||||
}}></div>
|
||||
</mdui-top-app-bar>
|
||||
}
|
||||
{
|
||||
/**
|
||||
* Mobile: 指定高度的容器
|
||||
* Default: 侧边列表
|
||||
*/
|
||||
<div style={isMobileUI() ? {
|
||||
display: 'flex',
|
||||
height: 'calc(100% - 80px - 67px)',
|
||||
width: '100%',
|
||||
} : {}} id="SideBar">
|
||||
<RecentChatsList style={{
|
||||
display: currentShowPage == 'Recents' ? undefined : 'none'
|
||||
}} />
|
||||
<FavouriteChatsList style={{
|
||||
display: currentShowPage == 'Favourites' ? undefined : 'none'
|
||||
}} />
|
||||
<AllChatsList style={{
|
||||
display: currentShowPage == 'AllChats' ? undefined : 'none'
|
||||
}} />
|
||||
</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="Favourites">收藏对话</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>
|
||||
</MainSharedContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const router = createBrowserRouter([{
|
||||
path: "/",
|
||||
element: Root,
|
||||
children: [
|
||||
{ path: 'info/:type', Component: UserOrChatInfoDialog, },
|
||||
],
|
||||
}])
|
||||
|
||||
return <RouterProvider router={router} />
|
||||
}
|
||||
|
||||
46
client/ui/routers/UserOrChatInfoDialog.tsx
Normal file
46
client/ui/routers/UserOrChatInfoDialog.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { dialog } from "mdui"
|
||||
import useRouterDialogRef from "./useRouterDialogRef"
|
||||
import { BlockerFunction, useBlocker, useLocation, useNavigate, useParams, useSearchParams } from "react-router"
|
||||
import useAsyncEffect from "../../utils/useAsyncEffect"
|
||||
import { CallbackError, Chat } from "lingchair-client-protocol"
|
||||
import showSnackbar from "../../utils/showSnackbar"
|
||||
import getClient from "../../getClient"
|
||||
import Avatar from "../Avatar"
|
||||
import { useContextSelector } from "use-context-selector"
|
||||
import MainSharedContext, { Shared } from "../MainSharedContext"
|
||||
import * as React from 'react'
|
||||
|
||||
export default function UserOrChatInfoDialog() {
|
||||
const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
|
||||
myProfileCache: context.myProfileCache,
|
||||
favouriteChats: context.favouriteChats,
|
||||
}))
|
||||
|
||||
const dialogRef = useRouterDialogRef()
|
||||
|
||||
const location = useLocation()
|
||||
const searchParams = useSearchParams()
|
||||
const params = useParams()
|
||||
|
||||
return (
|
||||
<mdui-dialog close-on-overlay-click close-on-esc ref={dialogRef}>
|
||||
<span style={{
|
||||
wordBreak: "break-word",
|
||||
}} dangerouslySetInnerHTML={{
|
||||
__html: "↓ searchParams<br><br>"
|
||||
+ Object.keys(location)
|
||||
// @ts-ignore 懒
|
||||
.map((k) => `${k} = ${location[k]}`)
|
||||
.join('<br><br>')
|
||||
+ "<br><br>↓ searchParams<br><br>" + Object.keys(searchParams)
|
||||
// @ts-ignore 懒
|
||||
.map((k) => `${k} = ${searchParams[k]}`)
|
||||
.join('<br><br>')
|
||||
+ "<br><br>↓ params<br><br>" + Object.keys(params)
|
||||
// @ts-ignore 懒
|
||||
.map((k) => `${k} = ${params[k]}`)
|
||||
.join('<br><br>')
|
||||
}}></span>
|
||||
</mdui-dialog>
|
||||
)
|
||||
}
|
||||
32
client/ui/routers/useRouterDialogRef.ts
Normal file
32
client/ui/routers/useRouterDialogRef.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { Dialog } from "mdui"
|
||||
import useAsyncEffect from "../../utils/useAsyncEffect"
|
||||
import sleep from "../../utils/sleep"
|
||||
import { useBlocker, useNavigate } from "react-router"
|
||||
import * as React from 'react'
|
||||
|
||||
export default function useRouterDialogRef() {
|
||||
const dialogRef = React.useRef<Dialog>()
|
||||
const shouldBlock = React.useRef(true)
|
||||
const nav = useNavigate()
|
||||
const blocker = useBlocker(({ currentLocation, nextLocation }) => shouldBlock.current && currentLocation.pathname !== nextLocation.pathname)
|
||||
|
||||
// 避免用户手动返回导致动画丢失
|
||||
React.useEffect(() => {
|
||||
if (blocker.state === "blocked") {
|
||||
// 这个让姐姐来就好啦
|
||||
dialogRef.current!.open = false
|
||||
}
|
||||
}, [blocker])
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
await sleep(10)
|
||||
dialogRef.current!.open = true
|
||||
dialogRef.current!.addEventListener('closed', async () => {
|
||||
await sleep(10)
|
||||
// 无论如何, 让姐姐先解除返回限制, 这样才能出去嘛
|
||||
shouldBlock.current = false
|
||||
nav(-1)
|
||||
})
|
||||
}, [])
|
||||
return dialogRef
|
||||
}
|
||||
Reference in New Issue
Block a user