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

可爱捏

Browse Source
This commit is contained in:
CrescentLeaf
2025-05-09 21:39:50 +08:00
parent f305225eb3
commit b6275ec636
3 changed files with 105 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/index.html
View File

@@ -66,6 +66,12 @@
body { body {
display: flex; display: flex;
margin: 0 0 0 0; margin: 0 0 0 0;
height: 100%;
}
html {
margin: 0 0 0 0;
height: 100%;
} }
/* 防止小尺寸图片模糊*/ /* 防止小尺寸图片模糊*/

163
client/ui/App.jsx
View File

@@ -80,6 +80,18 @@ export default function App() {
nickName: "Maya Fey", nickName: "Maya Fey",
} }
], ],
测试分组114514: [
{
userId: 0,
avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
nickName: "麻油衣酱",
},
{
userId: 0,
avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
nickName: "Maya Fey",
}
],
}) })
const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents') const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
@@ -95,6 +107,10 @@ export default function App() {
width: 'calc(var(--whitesilk-window-width) - 80px)', width: 'calc(var(--whitesilk-window-width) - 80px)',
height: 'var(--whitesilk-window-height)', height: 'var(--whitesilk-window-height)',
}}> }}>
{
// 移动端用 页面调试
(new URL(location.href).searchParams.get('debug') == 'true') && <script src="https://unpkg.com/eruda/eruda.js"></script>
}
<mdui-navigation-rail contained value="Recents" ref={navigationRailRef}> <mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
<mdui-button-icon icon="menu" slot="top"></mdui-button-icon> <mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
@@ -106,21 +122,33 @@ export default function App() {
{ {
// 侧边列表 // 侧边列表
} }
<mdui-list style={{ {
width: "35%", // 最近聊天
overflowY: 'auto', (navigationItemSelected == "Recents") &&
paddingRight: '10px' <mdui-list style={{
}}> width: "35%",
{ overflowY: 'auto',
navigationItemSelected == "Recents" ? paddingRight: '10px'
// 最近聊天 }}>
{
recentsList.map((v) => recentsList.map((v) =>
<RecentsListItem <RecentsListItem
nickName={v.nickName} nickName={v.nickName}
avatar={v.avatar} avatar={v.avatar}
content={v.content} /> content={v.content} />
) : )
// 联系人列表 }
</mdui-list>
}
{
// 联系人列表
(navigationItemSelected == "Contacts") &&
<mdui-list style={{
width: "35%",
overflowY: 'auto',
paddingRight: '10px'
}}>
{
Object.keys(contactsMap).map((v) => Object.keys(contactsMap).map((v) =>
<> <>
<mdui-list-subheader>{v}</mdui-list-subheader> <mdui-list-subheader>{v}</mdui-list-subheader>
@@ -133,8 +161,12 @@ export default function App() {
} }
</> </>
) )
} }
</mdui-list> </mdui-list>
}
{
// 分割线
}
<div style={{ <div style={{
height: 'calc(var(--whitesilk-window-height) - 16px)', height: 'calc(var(--whitesilk-window-height) - 16px)',
marginRight: '10px', marginRight: '10px',
@@ -147,65 +179,68 @@ export default function App() {
<div style={{ <div style={{
width: '100%', width: '100%',
height: '100%', height: '100%',
display: 'flex',
flexDirection: 'column',
overflowY: 'auto',
}}> }}>
<mdui-top-app-bar style={{ <mdui-top-app-bar style={{
position: 'relative', position: 'sticky',
}}> }}>
<mdui-button-icon icon="menu"></mdui-button-icon> <mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title> <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<mdui-button-icon icon="more_vert"></mdui-button-icon> <mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar> </mdui-top-app-bar>
<MessageContainer style={{ <div>
overflowY: 'auto', <MessageContainer style={{
height: '100%', height: '100%',
}}> }}>
<Message <Message
nickName="Fey" nickName="Fey"
avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"> avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
Test Test
</Message> </Message>
<Message <Message
direction="right" direction="right"
nickName="Fey" nickName="Fey"
avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"> avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
Test Test
</Message> </Message>
<Message <Message
nickName="Fey" nickName="Fey"
avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"> avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
Test Test
</Message> </Message>
<Message <Message
direction="right" direction="right"
nickName="Fey" nickName="Fey"
avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"> avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
Test Test
</Message> </Message>
<Message <Message
nickName="Fey" nickName="Fey"
avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"> avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
Test Test
</Message> </Message>
<Message <Message
direction="right" direction="right"
nickName="Fey" nickName="Fey"
avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"> avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
Test Test
</Message> </Message>
<Message <Message
nickName="Fey" nickName="Fey"
avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"> avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
Test Test
</Message> </Message>
<Message <Message
direction="right" direction="right"
nickName="Fey" nickName="Fey"
avatar="https://www.court-records.net/mugshot/aa6-004-maya.png"> avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
Test Test
</Message> </Message>
</MessageContainer> </MessageContainer>
</div>
</div> </div>
</div>
</div >
) )
} }

2
client/ui/chat/MessageContainer.jsx
View File

@@ -9,8 +9,6 @@ export default function MessageContainer({ children, style, ...props } = {}) {
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'flex-end', justifyContent: 'flex-end',
alignItems: 'center', alignItems: 'center',
paddingTop: '10px',
paddingBottom: '14px',
...style, ...style,
}} }}
{...props}> {...props}>