diff --git a/client/connection/EventBus.js b/client/connection/EventBus.js deleted file mode 100644 index cba7574..0000000 --- a/client/connection/EventBus.js +++ /dev/null @@ -1,3 +0,0 @@ -const Events = { - -} diff --git a/client/connection/UserApi.js b/client/connection/UserApi.js deleted file mode 100644 index e69de29..0000000 diff --git a/client/index.html b/client/index.html index 8146ba9..f661430 100644 --- a/client/index.html +++ b/client/index.html @@ -13,13 +13,70 @@ + + - TheWhiteSilk + + @@ -31,13 +88,15 @@ diff --git a/client/ui/App.jsx b/client/ui/App.jsx index f56d556..5901ee1 100644 --- a/client/ui/App.jsx +++ b/client/ui/App.jsx @@ -1,6 +1,8 @@ import Message from "./chat/Message.js" import MessageContainer from "./chat/MessageContainer.js" +import ContactsListItem from "./main/ContactsListItem.js" import RecentsListItem from "./main/RecentsListItem.js" +import useEventListener from './useEventListener.js' export default function App() { const [recentsList, setRecentsList] = React.useState([ @@ -15,15 +17,85 @@ export default function App() { avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png", nickName: "Maya Fey", content: "我是绫里真宵, 是一名灵媒师~" - } + }, + { + userId: 0, + avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png", + nickName: "麻油衣酱", + content: "成步堂君, 我又坐牢了（" + }, + { + userId: 0, + avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png", + nickName: "Maya Fey", + content: "我是绫里真宵, 是一名灵媒师~" + }, + { + userId: 0, + avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png", + nickName: "麻油衣酱", + content: "成步堂君, 我又坐牢了（" + }, + { + userId: 0, + avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png", + nickName: "Maya Fey", + content: "我是绫里真宵, 是一名灵媒师~" + }, + { + userId: 0, + avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png", + nickName: "麻油衣酱", + content: "成步堂君, 我又坐牢了（" + }, + { + userId: 0, + avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png", + nickName: "Maya Fey", + content: "我是绫里真宵, 是一名灵媒师~" + }, + { + userId: 0, + avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png", + nickName: "麻油衣酱", + content: "成步堂君, 我又坐牢了（" + }, + { + userId: 0, + avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png", + nickName: "Maya Fey", + content: "我是绫里真宵, 是一名灵媒师~" + }, ]) - const [contactsList, setContactsList] = React.useState([]) + const [contactsMap, setContactsMap] = React.useState({ + 默认分组: [ + { + userId: 0, + avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png", + nickName: "麻油衣酱", + }, + { + userId: 0, + avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png", + nickName: "Maya Fey", + } + ], + }) + const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents') + + const navigationRailRef = React.useRef(null) + useEventListener(navigationRailRef, 'change', (event) => { + setNavigationItemSelected(event.target.value) + }) return (
- + @@ -33,24 +105,39 @@ export default function App() { { // 侧边列表 - // 囊括内容: 最近, 联系人 - // 最近 对应 聊天页面 - // 联系人 对应 ??? } { - recentsList.map((v) => - - ) + navigationItemSelected == "Recents" ? + // 最近聊天 + recentsList.map((v) => + + ) : + // 联系人列表 + Object.keys(contactsMap).map((v) => + <> + {v} + { + contactsMap[v].map((v2) => + + ) + } + + ) }
@@ -59,6 +146,7 @@ export default function App() { }
Title - + + + Test + + + Test + + + Test + + + Test + + + Test + + + Test + diff --git a/client/ui/chat/MessageContainer.jsx b/client/ui/chat/MessageContainer.jsx index b647c7a..e73f985 100644 --- a/client/ui/chat/MessageContainer.jsx +++ b/client/ui/chat/MessageContainer.jsx @@ -2,7 +2,7 @@ * 消息容器 * @returns { React.JSX.Element } */ -export default function MessageContainer({ children, ...props } = {}) { +export default function MessageContainer({ children, style, ...props } = {}) { return (
{children} diff --git a/client/ui/main/ContactsListItem.jsx b/client/ui/main/ContactsListItem.jsx new file mode 100644 index 0000000..76d7fc9 --- /dev/null +++ b/client/ui/main/ContactsListItem.jsx @@ -0,0 +1,16 @@ +import Avatar from "../Avatar.js" + +export default function ContactsListItem({ nickName, avatar }) { + return ( + + {nickName} + + + ) +} diff --git a/client/ui/main/RecentsListItem.jsx b/client/ui/main/RecentsListItem.jsx index 1152c20..cc682f5 100644 --- a/client/ui/main/RecentsListItem.jsx +++ b/client/ui/main/RecentsListItem.jsx @@ -1,17 +1,17 @@ import Avatar from "../Avatar.js" -export default function RecentsListItem({ title, avatar, content }) { +export default function RecentsListItem({ nickName, avatar, content }) { return ( - {title} - + {nickName} + { + ref.current.addEventListener(eventName, callback) + return () => ref.current.removeEventListener(eventName, callback) + }, [ref, eventName, callback]) +}