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

refactor: 解耦側邊列表

Browse Source
This commit is contained in:
CrescentLeaf
2025-09-14 14:33:04 +08:00
parent 85b48475de
commit ee670f86b6
4 changed files with 92 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
client/ui/App.tsx
View File

@@ -1,8 +1,6 @@
import Client from "../api/Client.ts"
import data from "../Data.ts"
import ChatFragment from "./chat/ChatFragment.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"
@@ -17,6 +15,8 @@ import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
import RegisterDialog from "./dialog/RegisterDialog.tsx"
import LoginDialog from "./dialog/LoginDialog.tsx"
import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
import ContactsList from "./main/ContactsList.tsx";
import RecentsList from "./main/RecentsList.tsx";
declare global {
namespace React {
@@ -143,47 +143,15 @@ export default function App() {
<div id="SideBar">
{
// 最近聊天
<mdui-list style={{
overflowY: 'auto',
paddingRight: '10px',
display: navigationItemSelected == "Recents" ? undefined : 'none'
}}>
{
recentsList.map((v) =>
<RecentsListItem
key={v.id}
nickName={v.title}
avatar={v.avatar}
content={v.content} />
)
}
</mdui-list>
<RecentsList
display={navigationItemSelected == "Recents"}
recentsList={recentsList} />
}
{
// 联系人列表
<mdui-list style={{
overflowY: 'auto',
paddingRight: '10px',
display: navigationItemSelected == "Contacts" ? undefined : 'none'
}}>
<mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
{
Object.keys(contactsMap).map((v) =>
<mdui-collapse-item key={v} value={v}>
<mdui-list-subheader slot="header">{v}</mdui-list-subheader>
{
contactsMap[v].map((v2) =>
<ContactsListItem
key={v2.id}
nickName={v2.nickname}
avatar={v2.avatar} />
)
}
</mdui-collapse-item>
)
}
</mdui-collapse>
</mdui-list>
<ContactsList
display={navigationItemSelected == "Contacts"}
contactsMap={contactsMap} />
}
</div>
{

64
client/ui/AppMobile.tsx
View File

@@ -1,12 +1,8 @@
import Client from "../api/Client.ts"
import data from "../Data.ts"
import ChatFragment from "./chat/ChatFragment.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 { Dialog, NavigationBar, TextField } from "mdui"
@@ -16,6 +12,8 @@ import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
import RegisterDialog from "./dialog/RegisterDialog.tsx"
import LoginDialog from "./dialog/LoginDialog.tsx"
import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
import ContactsList from "./main/ContactsList.tsx"
import RecentsList from "./main/RecentsList.tsx"
declare global {
namespace React {
@@ -75,9 +73,9 @@ export default function AppMobile() {
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
})*/
/* useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
userProfileDialogRef.current!.open = true
})*/
const [myUserProfileCache, setMyUserProfileCache]: [User, React.Dispatch<React.SetStateAction<User>>] = React.useState(null as unknown as User)
@@ -119,12 +117,12 @@ export default function AppMobile() {
<UserProfileDialog
userProfileDialogRef={userProfileDialogRef}
user={myUserProfileCache} />
<mdui-navigation-bar scroll-target="#SideBar" label-visibility="selected" value="Recents" ref={navigationBarRef}>
<mdui-navigation-bar-item icon="watch_later--outlined" value="Recents">最近</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="contacts--outlined" value="Contacts">聯絡人</mdui-navigation-bar-item>
</mdui-navigation-bar>
<div style={{
display: 'flex',
height: 'calc(100% - 80px)',
@@ -132,51 +130,15 @@ export default function AppMobile() {
}} id="SideBar">
{
// 最近聊天
<mdui-list style={{
overflowY: 'auto',
marginLeft: '10px',
marginRight: '10px',
width: '100%',
display: navigationItemSelected == "Recents" ? undefined : 'none'
}}>
{
recentsList.map((v) =>
<RecentsListItem
key={v.id}
nickName={v.title}
avatar={v.avatar}
content={v.content} />
)
}
</mdui-list>
<RecentsList
display={navigationItemSelected == "Recents"}
recentsList={recentsList} />
}
{
// 联系人列表
<mdui-list style={{
overflowY: 'auto',
marginLeft: '10px',
marginRight: '10px',
width: '100%',
display: navigationItemSelected == "Contacts" ? undefined : 'none'
}}>
<mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
{
Object.keys(contactsMap).map((v) =>
<mdui-collapse-item key={v} value={v}>
<mdui-list-subheader slot="header">{v}</mdui-list-subheader>
{
contactsMap[v].map((v2) =>
<ContactsListItem
key={v2.id}
nickName={v2.nickname}
avatar={v2.avatar} />
)
}
</mdui-collapse-item>
)
}
</mdui-collapse>
</mdui-list>
<ContactsList
display={navigationItemSelected == "Contacts"}
contactsMap={contactsMap} />
}
</div>
</div>

40
client/ui/main/ContactsList.tsx Normal file
View File

@@ -0,0 +1,40 @@
import User from "../../api/client_data/User.ts"
import ContactsListItem from "./ContactsListItem.jsx"
interface Args extends React.HTMLAttributes<HTMLElement> {
contactsMap: { [key: string]: User[] }
display: boolean
}
export default function ContactsList({
contactsMap,
display,
...props
}: Args) {
return <mdui-list style={{
overflowY: 'auto',
marginLeft: '10px',
marginRight: '10px',
width: '100%',
display: display ? undefined : 'none'
}} {...props}>
<mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
{
Object.keys(contactsMap).map((v) =>
<mdui-collapse-item key={v} value={v}>
<mdui-list-subheader slot="header">{v}</mdui-list-subheader>
{
contactsMap[v].map((v2) =>
<ContactsListItem
key={v2.id}
nickName={v2.nickname}
avatar={v2.avatar} />
)
}
</mdui-collapse-item>
)
}
</mdui-collapse>
</mdui-list>
}

31
client/ui/main/RecentsList.tsx Normal file
View File

@@ -0,0 +1,31 @@
import RecentChat from "../../api/client_data/RecentChat.ts"
import User from "../../api/client_data/User.ts"
import ContactsListItem from "./ContactsListItem.jsx"
import RecentsListItem from "./RecentsListItem.jsx"
interface Args extends React.HTMLAttributes<HTMLElement> {
recentsList: RecentChat[]
display: boolean
}
export default function RecentsList({
recentsList,
display,
...props
}: Args) {
return <mdui-list style={{
overflowY: 'auto',
paddingRight: '10px',
display: display ? undefined : 'none'
}}>
{
recentsList.map((v) =>
<RecentsListItem
key={v.id}
nickName={v.title}
avatar={v.avatar}
content={v.content} />
)
}
</mdui-list>
}