Nya

client/connection/EventBus.js

@@ -0,0 +1,3 @@
+const Events = {
+    
+}

client/ui/App.jsx

@@ -1,29 +1,36 @@
-import Avatar from "./Avatar.js"
 import Message from "./chat/Message.js"
 import MessageContainer from "./chat/MessageContainer.js"
-
+import RecentsListItem from "./main/RecentsListItem.js"
-function ListItem({ title, avatar, content }) {
-    return (
-        <mdui-list-item rounded>
-            {title}
-            <Avatar src={avatar} text="title" slot="icon" />
-            <span slot="description"
-                style={{
-                    display: "inline-block", /* 或者 block */
-                    maxWidth: "100%", /* 或者固定宽度如 200px */
-                    whiteSpace: "nowrap", /* 禁止换行 */
-                    overflow: "hidden", /* 隐藏溢出内容 */
-                    textOverflow: "ellipsis", /* 显示省略号 */
-                }}>{content}</span>
-        </mdui-list-item>
-    )
-}
 
 export default function App() {
+    const [recentsList, setRecentsList] = React.useState([
+        {
+            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([])
+
     return (
         <div style={{
             display: "flex",
         }}>
+            <mdui-navigation-rail contained value="Recents">
+                <mdui-button-icon icon="menu" slot="top"></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>
+
+                <mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
+            </mdui-navigation-rail>
             {
                 // 侧边列表
                 // 囊括内容: 最近, 联系人
@@ -33,28 +40,48 @@ export default function App() {
             <mdui-list style={{
                 width: "22.4%"
             }}>
-                <ListItem
+                {
-                    title="麻油衣酱"
+                    recentsList.map((v) =>
-                    avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"
+                        <RecentsListItem
-                    content="Nick's old partner and friend and the chief-in-training of Kurain Village, Maya makes her return to the main series..." />
+                            title={v.nickName}
-                <ListItem
+                            avatar={v.avatar}
-                    title="麻油一酱"
+                            content={v.content} />
-                    avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"
+                    )
-                    content="我是绫里真宵, 是一名灵媒师~" />
+                }
             </mdui-list>
-            {/* <MessageContainer>
+            <div style={{
-                <Message
+                height: '100%',
-                    nickname="Fey"
+            }}>
-                    avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
+                <mdui-divider vertical></mdui-divider>
-                    Test
+            </div>
-                </Message>
+            {
-                <Message
+                // 聊天页面
-                    direction="right"
+            }
-                    nickname="Fey"
+            <div style={{
-                    avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
+                width: '100%',
-                    Test
+            }}>
-                </Message>
+                <mdui-top-app-bar style={{
-            </MessageContainer> */}
+                    position: 'relative',
+                }}>
+                    <mdui-button-icon icon="menu"></mdui-button-icon>
+                    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
+                    <mdui-button-icon icon="more_vert"></mdui-button-icon>
+                </mdui-top-app-bar>
+                <MessageContainer>
+                    <Message
+                        nickName="Fey"
+                        avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
+                        Test
+                    </Message>
+                    <Message
+                        direction="right"
+                        nickName="Fey"
+                        avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
+                        Test
+                    </Message>
+                </MessageContainer>
+            </div>
+
         </div >
     )
 }

client/ui/chat/Message.jsx

@@ -5,10 +5,10 @@ import Avatar from "../Avatar.js"
  * @param { Object } param
  * @param { "left" | "right" } [param.direction="left"] 消息方向
  * @param { String } [param.avatar] 头像链接
- * @param { String } [param.nickname] 昵称
+ * @param { String } [param.nickName] 昵称
  * @returns { React.JSX.Element }
  */
-export default function Message({ direction = 'left', avatar, nickname, children, ...props } = {}) {
+export default function Message({ direction = 'left', avatar, nickName, children, ...props } = {}) {
     let isAtRight = direction == 'right'
     return (
         <div
@@ -32,7 +32,7 @@ export default function Message({ direction = 'left', avatar, nickname, children
                             alignSelf: "center",
                             fontSize: "90%"
                         }}>
-                        {nickname}
+                        {nickName}
                     </span>
                 }
                 {
@@ -40,7 +40,7 @@ export default function Message({ direction = 'left', avatar, nickname, children
                 }
                 <Avatar
                     src={avatar}
-                    text={nickname}
+                    text={nickName}
                     style={{
                         width: "43px",
                         height: "43px",
@@ -53,7 +53,7 @@ export default function Message({ direction = 'left', avatar, nickname, children
                             alignSelf: "center",
                             fontSize: "90%"
                         }}>
-                        {nickname}
+                        {nickName}
                     </span>
                 }
             </div>

client/ui/main/RecentsListItem.jsx

@@ -0,0 +1,21 @@
+import Avatar from "../Avatar.js"
+
+export default function RecentsListItem({ title, avatar, content }) {
+    return (
+        <mdui-list-item rounded style={{
+            marginTop: '3px',
+            marginBottom: '3px',
+        }}>
+            {title}
+            <Avatar src={avatar} text="title" slot="icon" />
+            <span slot="description"
+                style={{
+                    display: "inline-block", /* 或者 block */
+                    maxWidth: "100%", /* 或者固定宽度如 200px */
+                    whiteSpace: "nowrap", /* 禁止换行 */
+                    overflow: "hidden", /* 隐藏溢出内容 */
+                    textOverflow: "ellipsis", /* 显示省略号 */
+                }}>{content}</span>
+        </mdui-list-item>
+    )
+}