From 65ff48dabca14d6338a1f1dcd0204dca18d486f3 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Sat, 19 Apr 2025 15:32:51 +0800
Subject: [PATCH] Nya

---
 client/connection/EventBus.js      |   3 +
 client/connection/UserApi.js       |   0
 client/ui/App.jsx                  | 105 ++++++++++++++++++-----------
 client/ui/chat/Message.jsx         |  10 +--
 client/ui/main/RecentsListItem.jsx |  21 ++++++
 5 files changed, 95 insertions(+), 44 deletions(-)
 create mode 100644 client/connection/EventBus.js
 create mode 100644 client/connection/UserApi.js
 create mode 100644 client/ui/main/RecentsListItem.jsx

diff --git a/client/connection/EventBus.js b/client/connection/EventBus.js
new file mode 100644
index 0000000..cba7574
--- /dev/null
+++ b/client/connection/EventBus.js
@@ -0,0 +1,3 @@
+const Events = {
+    
+}
diff --git a/client/connection/UserApi.js b/client/connection/UserApi.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/ui/App.jsx b/client/ui/App.jsx
index fd0d69c..f56d556 100644
--- a/client/ui/App.jsx
+++ b/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"
-
-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>
-    )
-}
+import RecentsListItem from "./main/RecentsListItem.js"
 
 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="麻油衣酱"
-                    avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"
-                    content="Nick's old partner and friend and the chief-in-training of Kurain Village, Maya makes her return to the main series..." />
-                <ListItem
-                    title="麻油一酱"
-                    avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"
-                    content="我是绫里真宵, 是一名灵媒师~" />
+                {
+                    recentsList.map((v) =>
+                        <RecentsListItem
+                            title={v.nickName}
+                            avatar={v.avatar}
+                            content={v.content} />
+                    )
+                }
             </mdui-list>
-            {/* <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 style={{
+                height: '100%',
+            }}>
+                <mdui-divider vertical></mdui-divider>
+            </div>
+            {
+                // 聊天页面
+            }
+            <div style={{
+                width: '100%',
+            }}>
+                <mdui-top-app-bar style={{
+                    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 >
     )
 }
\ No newline at end of file
diff --git a/client/ui/chat/Message.jsx b/client/ui/chat/Message.jsx
index 28c3f97..ca20cde 100644
--- a/client/ui/chat/Message.jsx
+++ b/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>
diff --git a/client/ui/main/RecentsListItem.jsx b/client/ui/main/RecentsListItem.jsx
new file mode 100644
index 0000000..1152c20
--- /dev/null
+++ b/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>
+    )
+}