CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Nya

Browse Source
This commit is contained in:
CrescentLeaf
2025-04-19 15:32:51 +08:00
parent cfac00e87a
commit 65ff48dabc
5 changed files with 95 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/connection/EventBus.js Normal file
View File

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

0
client/connection/UserApi.js Normal file
View File

105
client/ui/App.jsx
View File

@@ -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 >
)
}

10
client/ui/chat/Message.jsx
View File

@@ -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>

21
client/ui/main/RecentsListItem.jsx Normal file
View File

@@ -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>
)
}