我弄了一坨史山, 可能在下一个 commit 会撤销更改, 或者继续完善
This commit is contained in:
CrescentLeaf
@@ -19,6 +19,7 @@ import FavouriteChatsList from "./main-page/FavouriteChatsList.tsx"
|
||||
import RecentChatsList from "./main-page/RecentChatsList.tsx"
|
||||
import UserOrChatInfoDialog from "./routers/UserOrChatInfoDialog.tsx"
|
||||
import UserOrChatInfoDialogLoader from "./routers/UserOrChatInfoDialogDataLoader.ts"
|
||||
import ChatInfoDialogDataLoader from "./routers/ChatInfoDialogDataLoader.ts"
|
||||
import ChatFragmentDialog from "./routers/ChatFragmentDialog.tsx"
|
||||
import EffectOnly from "./EffectOnly.tsx"
|
||||
import MainSharedReducer from "./MainSharedReducer.ts"
|
||||
@@ -29,6 +30,7 @@ import Split from 'split.js'
|
||||
import data from "../data.ts"
|
||||
import LazyChatFragment from "./chat-fragment/LazyChatFragment.tsx"
|
||||
import AddFavourtieChatDialog from "./routers/AddFavourtieChatDialog.tsx"
|
||||
import RouterDialogsContextWrapper from './routers/RouterDialogsContextWrapper.tsx'
|
||||
|
||||
function Root() {
|
||||
const [myProfileCache, setMyProfileCache] = React.useState<UserMySelf>()
|
||||
@@ -117,140 +119,144 @@ function Root() {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<MainSharedContext.Provider value={sharedContext}>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
position: 'relative',
|
||||
flexDirection: isMobileUI() ? 'column' : 'row',
|
||||
width: '100%',
|
||||
height: 'var(--whitesilk-window-height)',
|
||||
}}>
|
||||
{
|
||||
// 将子路由渲染到此处
|
||||
<Outlet />
|
||||
}
|
||||
<LoginDialog open={showLoginDialog} />
|
||||
<RegisterDialog open={showRegisterDialog} />
|
||||
<mdui-navigation-drawer ref={drawerRef} modal close-on-esc close-on-overlay-click>
|
||||
<mdui-list style={{
|
||||
padding: '10px',
|
||||
}}>
|
||||
<mdui-list-item rounded onClick={() => gotoUserInfo(nav, myProfileCache!.getId())}>
|
||||
<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="settings">客户端设置</mdui-list-item>
|
||||
<mdui-list-item rounded icon="person_add" onClick={() => nav('/add/favourite_chat')}>添加收藏对话</mdui-list-item>
|
||||
<mdui-list-item rounded icon="group_add">创建新的群组</mdui-list-item>
|
||||
</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>
|
||||
<RouterDialogsContextWrapper>
|
||||
<MainSharedContext.Provider value={sharedContext}>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
position: 'relative',
|
||||
flexDirection: isMobileUI() ? 'column' : 'row',
|
||||
width: '100%',
|
||||
height: 'var(--whitesilk-window-height)',
|
||||
}}>
|
||||
{
|
||||
// 将子路由渲染到此处
|
||||
<Outlet />
|
||||
}
|
||||
<LoginDialog open={showLoginDialog} />
|
||||
<RegisterDialog open={showRegisterDialog} />
|
||||
<mdui-navigation-drawer ref={drawerRef} modal close-on-esc close-on-overlay-click>
|
||||
<mdui-list style={{
|
||||
padding: '10px',
|
||||
}}>
|
||||
<mdui-list-item rounded onClick={() => gotoUserInfo(nav, myProfileCache!.getId())}>
|
||||
<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="settings">客户端设置</mdui-list-item>
|
||||
<mdui-list-item rounded icon="person_add" onClick={() => nav('/add/favourite_chat')}>添加收藏对话</mdui-list-item>
|
||||
<mdui-list-item rounded icon="group_add">创建新的群组</mdui-list-item>
|
||||
</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() ? {
|
||||
height: 'calc(100% - 80px - 67px)',
|
||||
marginLeft: '15px',
|
||||
marginRight: '15px',
|
||||
marginTop: '5px',
|
||||
marginBottom: '5px',
|
||||
} : {
|
||||
paddingRight: '8px',
|
||||
}} id="SideBar">
|
||||
<RecentChatsList style={{
|
||||
display: currentShowPage == 'Recents' ? undefined : 'none'
|
||||
}} />
|
||||
<FavouriteChatsList style={{
|
||||
display: currentShowPage == 'Favourites' ? undefined : 'none'
|
||||
}} />
|
||||
<AllChatsList style={{
|
||||
display: currentShowPage == 'AllChats' ? undefined : 'none'
|
||||
}} />
|
||||
</div>
|
||||
}
|
||||
{
|
||||
!isMobileUI() && <div id="ChatFragment" style={{
|
||||
display: "flex",
|
||||
width: '100%'
|
||||
}}>
|
||||
{
|
||||
(state.currentSelectedChatId && state.currentSelectedChatId != '')
|
||||
? <LazyChatFragment openedWithRouter={false} chatId={state.currentSelectedChatId!} />
|
||||
: <div style={{
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
alignSelf: 'center',
|
||||
}}>
|
||||
选择以开始对话......
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{
|
||||
/**
|
||||
* Mobile: 底部导航栏提供列表切换
|
||||
* Default: 侧边列表提供列表切换
|
||||
*/
|
||||
: <mdui-top-app-bar style={{
|
||||
isMobileUI() && <mdui-navigation-bar ref={navigationRef} label-visibility="selected" value="Recents" style={{
|
||||
position: 'sticky',
|
||||
marginTop: '3px',
|
||||
marginRight: '6px',
|
||||
marginLeft: '15px',
|
||||
top: '0px',
|
||||
bottom: '0',
|
||||
}}>
|
||||
<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%',
|
||||
} : {
|
||||
paddingRight: '8px',
|
||||
}} id="SideBar">
|
||||
<RecentChatsList style={{
|
||||
display: currentShowPage == 'Recents' ? undefined : 'none'
|
||||
}} />
|
||||
<FavouriteChatsList style={{
|
||||
display: currentShowPage == 'Favourites' ? undefined : 'none'
|
||||
}} />
|
||||
<AllChatsList style={{
|
||||
display: currentShowPage == 'AllChats' ? undefined : 'none'
|
||||
}} />
|
||||
</div>
|
||||
}
|
||||
{
|
||||
<div id="ChatFragment" style={{
|
||||
display: "flex",
|
||||
width: '100%'
|
||||
}}>
|
||||
{
|
||||
(state.currentSelectedChatId && state.currentSelectedChatId != '')
|
||||
? <LazyChatFragment openedWithRouter={false} chatId={state.currentSelectedChatId!} />
|
||||
: <div style={{
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
alignSelf: 'center',
|
||||
}}>
|
||||
选择以开始对话......
|
||||
</div>
|
||||
}
|
||||
</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>
|
||||
<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>
|
||||
</RouterDialogsContextWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -302,6 +308,13 @@ export default function Main() {
|
||||
{
|
||||
path: 'chat',
|
||||
Component: ChatFragmentDialog,
|
||||
children: [
|
||||
{
|
||||
path: 'info',
|
||||
Component: UserOrChatInfoDialog,
|
||||
loader: ChatInfoDialogDataLoader,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}])
|
||||
|
||||
Reference in New Issue
Block a user