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

CSS 使人抓狂

Browse Source
This commit is contained in:
CrescentLeaf
2025-04-20 00:58:52 +08:00
parent 65ff48dabc
commit f305225eb3
8 changed files with 242 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/connection/EventBus.js
View File

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

0
client/connection/UserApi.js
View File

65
client/index.html
View File

@@ -13,13 +13,70 @@
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
<script src="https://unpkg.com/split.js/dist/split.min.js"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<title>TheWhiteSilk</title>
<style>
/* 滑条*/
.no-scroll-bar::-webkit-scrollbar {
width: 0px !important;
}
/* https://blog.csdn.net/qq_39347364/article/details/111996581*/
*::-webkit-scrollbar {
width: 7px;
height: 10px;
}
*::-webkit-scrollbar-track {
width: 6px;
background: rgba(#101F1C, 0.1);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(144, 147, 153, .5);
background-clip: padding-box;
min-height: 28px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
transition: background-color .3s;
cursor: pointer;
}
*::-webkit-scrollbar-thumb:hover {
background-color: rgba(144, 147, 153, .3);
}
/* 使用系统字体 在部分系统表现很好*/
/* 我们至今仍未能知道桌面端浏览器字体的秘密*/
*:not(.material-icons, .mdui-icon, mdui-icon, .fa, .google-symbols) {
font-family: -apple-system, system-ui, -webkit-system-font !important;
}
body {
display: flex;
margin: 0 0 0 0;
}
/* 防止小尺寸图片模糊*/
* {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
</style>
</head>
<body>
@@ -31,13 +88,15 @@
<script type="module">
import App from './ui/App.js'
ReactDOM.createRoot(document.getElementById('app')).render(React.createElement(App, null))
let onResize = () => {
document.body.style.setProperty('--whitesilk-widget-message-maxwidth', mdui.breakpoint().down('md') ? "80%" : "70%")
document.body.style.setProperty('--whitesilk-window-width', window.innerWidth + 'px')
document.body.style.setProperty('--whitesilk-window-height', window.innerHeight + 'px')
}
window.addEventListener('resize', onResize)
onResize()
</script>
</body>

154
client/ui/App.jsx
View File

@@ -1,6 +1,8 @@
import Message from "./chat/Message.js"
import MessageContainer from "./chat/MessageContainer.js"
import ContactsListItem from "./main/ContactsListItem.js"
import RecentsListItem from "./main/RecentsListItem.js"
import useEventListener from './useEventListener.js'
export default function App() {
const [recentsList, setRecentsList] = React.useState([
@@ -15,15 +17,85 @@ export default function App() {
avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
nickName: "Maya Fey",
content: "我是绫里真宵, 是一名灵媒师~"
}
},
{
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: "我是绫里真宵, 是一名灵媒师~"
},
{
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: "我是绫里真宵, 是一名灵媒师~"
},
{
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: "我是绫里真宵, 是一名灵媒师~"
},
{
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([])
const [contactsMap, setContactsMap] = React.useState({
默认分组: [
{
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 navigationRailRef = React.useRef(null)
useEventListener(navigationRailRef, 'change', (event) => {
setNavigationItemSelected(event.target.value)
})
return (
<div style={{
display: "flex",
position: 'relative',
width: 'calc(var(--whitesilk-window-width) - 80px)',
height: 'var(--whitesilk-window-height)',
}}>
<mdui-navigation-rail contained value="Recents">
<mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
<mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
<mdui-navigation-rail-item icon="watch_later--outlined" value="Recents"></mdui-navigation-rail-item>
@@ -33,24 +105,39 @@ export default function App() {
</mdui-navigation-rail>
{
// 侧边列表
// 囊括内容: 最近, 联系人
// 最近 对应 聊天页面
// 联系人 对应 ???
}
<mdui-list style={{
width: "22.4%"
width: "35%",
overflowY: 'auto',
paddingRight: '10px'
}}>
{
recentsList.map((v) =>
<RecentsListItem
title={v.nickName}
avatar={v.avatar}
content={v.content} />
)
navigationItemSelected == "Recents" ?
// 最近聊天
recentsList.map((v) =>
<RecentsListItem
nickName={v.nickName}
avatar={v.avatar}
content={v.content} />
) :
// 联系人列表
Object.keys(contactsMap).map((v) =>
<>
<mdui-list-subheader>{v}</mdui-list-subheader>
{
contactsMap[v].map((v2) =>
<ContactsListItem
nickName={v2.nickName}
avatar={v2.avatar} />
)
}
</>
)
}
</mdui-list>
<div style={{
height: '100%',
height: 'calc(var(--whitesilk-window-height) - 16px)',
marginRight: '10px',
}}>
<mdui-divider vertical></mdui-divider>
</div>
@@ -59,6 +146,7 @@ export default function App() {
}
<div style={{
width: '100%',
height: '100%',
}}>
<mdui-top-app-bar style={{
position: 'relative',
@@ -67,7 +155,43 @@ export default function App() {
<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>
<MessageContainer style={{
overflowY: 'auto',
height: '100%',
}}>
<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>
<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>
<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>
<Message
nickName="Fey"
avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">

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

@@ -2,7 +2,7 @@
* 消息容器
* @returns { React.JSX.Element }
*/
export default function MessageContainer({ children, ...props } = {}) {
export default function MessageContainer({ children, style, ...props } = {}) {
return (
<div style={{
display: 'flex',
@@ -10,7 +10,8 @@ export default function MessageContainer({ children, ...props } = {}) {
justifyContent: 'flex-end',
alignItems: 'center',
paddingTop: '10px',
paddingBottom: '14px'
paddingBottom: '14px',
...style,
}}
{...props}>
{children}

16
client/ui/main/ContactsListItem.jsx Normal file
View File

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

10
client/ui/main/RecentsListItem.jsx
View File

@@ -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", /* 显示省略号 */

17
client/ui/useEventListener.js Normal file
View File

@@ -0,0 +1,17 @@
/**
* @callback callback
* @param { Event } event
*/
/**
* 绑定事件
* @param { React.Ref } ref
* @param { String } eventName
* @param { callback } callback
*/
export default function useEventListener(ref, eventName, callback) {
React.useEffect(() => {
ref.current.addEventListener(eventName, callback)
return () => ref.current.removeEventListener(eventName, callback)
}, [ref, eventName, callback])
}