25320fe521
* 所有的 CDN 依賴已全部 npm 化 * Webpack? 一邊去! Vite 太好用啦! * 將 Imports.ts 剔除 * 移除了大量的靜態文件 * 將 index.html 的部分代碼分離 * 修改 deno task * 移除了動態編譯頁面的支持 * ./static 引用全部變更為 npm 包引用
69 lines
2.5 KiB
JavaScript
69 lines
2.5 KiB
JavaScript
import Message from "./Message.jsx"
|
|
import MessageContainer from "./MessageContainer.jsx"
|
|
|
|
import * as React from 'react'
|
|
|
|
export default function ChatFragment({ ...props } = {}) {
|
|
return (
|
|
<div style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflowY: 'auto',
|
|
}} {...props}>
|
|
<mdui-top-app-bar style={{
|
|
position: 'sticky',
|
|
}}>
|
|
<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>
|
|
<div style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
height: "100%",
|
|
}}>
|
|
<div style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
}}>
|
|
<mdui-button variant="text">加載更多</mdui-button>
|
|
</div>
|
|
<MessageContainer>
|
|
<Message
|
|
nickName="Fey"
|
|
avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
|
|
Test
|
|
</Message>
|
|
</MessageContainer>
|
|
{
|
|
// 输入框
|
|
}
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
paddingBottom: '0.1rem',
|
|
paddingTop: '0.1rem',
|
|
height: '4rem',
|
|
position: 'sticky',
|
|
bottom: '2px',
|
|
marginLeft: '5px',
|
|
marginRight: '4px',
|
|
backgroundColor: 'rgb(var(--mdui-color-background))',
|
|
}}>
|
|
<mdui-text-field variant="outlined" placeholder="喵呜~" autosize max-rows="1" style={{
|
|
marginRight: '10px',
|
|
}}></mdui-text-field>
|
|
<mdui-button-icon slot="end-icon" icon="more_vert" style={{
|
|
marginRight: '6px',
|
|
}}></mdui-button-icon>
|
|
<mdui-button-icon icon="send" style={{
|
|
marginRight: '7px',
|
|
}}></mdui-button-icon>
|
|
</div>
|
|
</div>
|
|
</div >
|
|
)
|
|
}
|