CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(wip): user profile dialog

Browse Source
This commit is contained in:
CrescentLeaf
2025-09-13 00:39:58 +08:00
parent 372e71bc1c
commit 12c2e13505
2 changed files with 109 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
client/ui/App.tsx
View File

@@ -1,25 +1,29 @@
import Client from "../api/Client.ts"
import data from "../Data.ts"
import ChatFragment from "./chat/ChatFragment.jsx"
import LoginDialog from "./dialog/LoginDialog.tsx"
import ContactsListItem from "./main/ContactsListItem.jsx"
import RecentsListItem from "./main/RecentsListItem.jsx"
import useEventListener from './useEventListener.ts'
import User from "../api/client_data/User.ts"
import RecentChat from "../api/client_data/RecentChat.ts"
import Avatar from "./Avatar.tsx"
import * as React from 'react'
import { Button, Dialog, NavigationRail, TextField } from "mdui"
import { Button, ButtonIcon, Dialog, NavigationRail, TextField } from "mdui"
import Split from 'split.js'
import 'mdui/jsx.zh-cn.d.ts'
import { checkApiSuccessOrSncakbar } from "./snackbar.ts";
import RegisterDialog from "./dialog/RegisterDialog.tsx";
import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
import RegisterDialog from "./dialog/RegisterDialog.tsx"
import LoginDialog from "./dialog/LoginDialog.tsx"
import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
declare global {
namespace React {
namespace JSX {
interface IntrinsicAttributes {
id?: string
slot?: string
}
}
}
@@ -57,7 +61,7 @@ export default function App() {
const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
const navigationRailRef: React.MutableRefObject<NavigationRail | null> = React.useRef(null)
useEventListener(navigationRailRef as React.MutableRefObject<NavigationRail>, 'change', (event) => {
useEventListener(navigationRailRef, 'change', (event) => {
setNavigationItemSelected((event.target as HTMLElement as NavigationRail).value as string)
})
@@ -70,6 +74,14 @@ export default function App() {
const registerInputNickNameRef: React.MutableRefObject<TextField | null> = React.useRef(null)
const registerInputPasswordRef: React.MutableRefObject<TextField | null> = React.useRef(null)
const userProfileDialogRef: React.MutableRefObject<Dialog | null> = React.useRef(null)
const openMyUserProfileDialogButtonRef: React.MutableRefObject<HTMLElement | null> = React.useRef(null)
useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
userProfileDialogRef.current!.open = true
})
const [myUserProfileCache, setMyUserProfileCache]: [User, React.Dispatch<React.SetStateAction<User>>] = React.useState(null as unknown as User)
React.useEffect(() => {
; (async () => {
Split(['#SideBar', '#ChatFragment'], {
@@ -79,13 +91,14 @@ export default function App() {
})
Client.connect()
const re = await Client.invoke("User.auth", {
access_token: data.access_token || '',
})
const re = await Client.auth(data.access_token || "")
if (re.code == 401)
loginDialogRef.current!.open = true
else if (re.code != 200)
else if (re.code != 200) {
if (checkApiSuccessOrSncakbar(re, "驗證失敗")) return
} else if (re.code == 200) {
setMyUserProfileCache(Client.myUserProfile as User)
}
})()
}, [])
@@ -110,8 +123,14 @@ export default function App() {
loginInputAccountRef={loginInputAccountRef}
loginInputPasswordRef={loginInputPasswordRef} />
<UserProfileDialog
userProfileDialogRef={userProfileDialogRef}
user={myUserProfileCache} />
<mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
<mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
<mdui-button-icon slot="top">
<Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyUserProfileDialogButtonRef} />
</mdui-button-icon>
<mdui-navigation-rail-item icon="watch_later--outlined" value="Recents"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="contacts--outlined" value="Contacts"></mdui-navigation-rail-item>