From 714e9d58ba65ab2791548a2744566ecd74df648c Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Sat, 19 Apr 2025 00:59:43 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E5=88=9D=E6=AD=A5=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/App.jsx | 42 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/client/ui/App.jsx b/client/ui/App.jsx
index 2c787b5..fd0d69c 100644
--- a/client/ui/App.jsx
+++ b/client/ui/App.jsx
@@ -1,9 +1,47 @@
+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>
+    )
+}
+
 export default function App() {
     return (
-        <div>
+        <div style={{
+            display: "flex",
+        }}>
+            {
+                // 侧边列表
+                // 囊括内容: 最近, 联系人
+                // 最近 对应 聊天页面
+                // 联系人 对应 ???
+            }
+            <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="我是绫里真宵, 是一名灵媒师~" />
+            </mdui-list>
             {/* <MessageContainer>
                 <Message
                     nickname="Fey"
@@ -17,6 +55,6 @@ export default function App() {
                     Test
                 </Message>
             </MessageContainer> */}
-        </div>
+        </div >
     )
 }
\ No newline at end of file