CSS 使人抓狂

client/ui/main/ContactsListItem.jsx

@@ -0,0 +1,16 @@
+import Avatar from "../Avatar.js"
+
+export default function ContactsListItem({ nickName, avatar }) {
+    return (
+        <mdui-list-item rounded style={{
+            marginTop: '3px',
+            marginBottom: '3px',
+            width: '100%',
+        }}>
+            <span style={{
+                width: "100%",
+            }}>{nickName}</span>
+            <Avatar src={avatar} text="title" slot="icon" />
+        </mdui-list-item>
+    )
+}

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 (
         <mdui-list-item rounded style={{
             marginTop: '3px',
             marginBottom: '3px',
         }}>
-            {title}
-            <Avatar src={avatar} text="title" slot="icon" />
+            {nickName}
+            <Avatar src={avatar} text={nickName} slot="icon" />
             <span slot="description"
                 style={{
-                    display: "inline-block", /* 或者 block */
-                    maxWidth: "100%", /* 或者固定宽度如 200px */
+                    width: "100%",
+                    display: "inline-block",
                     whiteSpace: "nowrap", /* 禁止换行 */
                     overflow: "hidden", /* 隐藏溢出内容 */
                     textOverflow: "ellipsis", /* 显示省略号 */