feat(wip): 前端, 以及編譯前端
TODO: 修復 webpack (in mian.ts)
This commit is contained in:
CrescentLeaf
283
client/ui/App.jsx
Normal file
283
client/ui/App.jsx
Normal file
@@ -0,0 +1,283 @@
|
||||
import Message from "./chat/Message.jsx"
|
||||
import MessageContainer from "./chat/MessageContainer.jsx"
|
||||
import ContactsListItem from "./main/ContactsListItem.jsx"
|
||||
import RecentsListItem from "./main/RecentsListItem.jsx"
|
||||
import useEventListener from './useEventListener.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: "我是绫里真宵, 是一名灵媒师~"
|
||||
},
|
||||
{
|
||||
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 [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",
|
||||
}
|
||||
],
|
||||
测试分组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 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)',
|
||||
}}>
|
||||
{
|
||||
// 移动端用 页面调试
|
||||
// 換個地方弄
|
||||
// (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-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>
|
||||
{
|
||||
// 侧边列表
|
||||
}
|
||||
{
|
||||
// 最近聊天
|
||||
(navigationItemSelected == "Recents") &&
|
||||
<mdui-list style={{
|
||||
width: "35%",
|
||||
overflowY: 'auto',
|
||||
paddingRight: '10px'
|
||||
}}>
|
||||
{
|
||||
recentsList.map((v) =>
|
||||
<RecentsListItem
|
||||
nickName={v.nickName}
|
||||
avatar={v.avatar}
|
||||
content={v.content} />
|
||||
)
|
||||
}
|
||||
</mdui-list>
|
||||
}
|
||||
{
|
||||
// 联系人列表
|
||||
(navigationItemSelected == "Contacts") &&
|
||||
<mdui-list style={{
|
||||
width: "35%",
|
||||
overflowY: 'auto',
|
||||
paddingRight: '10px'
|
||||
}}>
|
||||
{
|
||||
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={{
|
||||
// 我们删除了 body 的padding 因此不需要再 calc 了
|
||||
height: 'var(--whitesilk-window-height)',
|
||||
marginRight: '10px',
|
||||
}}>
|
||||
<mdui-divider vertical></mdui-divider>
|
||||
</div>
|
||||
{
|
||||
// 聊天页面
|
||||
}
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflowY: 'auto',
|
||||
}}>
|
||||
<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>
|
||||
<MessageContainer style={{
|
||||
height: '100%',
|
||||
paddingBottom: '20px',
|
||||
}}>
|
||||
<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">
|
||||
Test
|
||||
</Message>
|
||||
<Message
|
||||
direction="right"
|
||||
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: '0',
|
||||
backgroundColor: 'rgb(var(--mdui-color-background))',
|
||||
}}>
|
||||
<mdui-text-field variant="outlined" placeholder="喵呜~" 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>
|
||||
{/* <mdui-top-app-bar style={{
|
||||
position: 'sticky',
|
||||
bottom: '0',
|
||||
}}>
|
||||
<mdui-button-icon icon="menu"></mdui-button-icon>
|
||||
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
|
||||
<div style={{
|
||||
flexGrow: 1,
|
||||
}}></div>
|
||||
<mdui-button-icon icon="more_vert"></mdui-button-icon>
|
||||
</mdui-top-app-bar> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
15
client/ui/Avatar.jsx
Normal file
15
client/ui/Avatar.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
export default function Avatar({ src, text, icon = 'person', ...props } = {}) {
|
||||
return (
|
||||
src ? <mdui-avatar {...props}>
|
||||
<img src={src} alt={'(头像)' + text || ''} />
|
||||
</mdui-avatar>
|
||||
: (
|
||||
text ? <mdui-avatar {...props}>
|
||||
{
|
||||
text.substring(0, 0)
|
||||
}
|
||||
</mdui-avatar>
|
||||
: <mdui-avatar icon={icon} {...props} />
|
||||
)
|
||||
)
|
||||
}
|
||||
3
client/ui/chat/ChatFragment.jsx
Normal file
3
client/ui/chat/ChatFragment.jsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export default function ChatFragment() {
|
||||
|
||||
}
|
||||
83
client/ui/chat/Message.jsx
Normal file
83
client/ui/chat/Message.jsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import Avatar from "../Avatar.jsx"
|
||||
|
||||
/**
|
||||
* 一条消息
|
||||
* @param { Object } param
|
||||
* @param { "left" | "right" } [param.direction="left"] 消息方向
|
||||
* @param { String } [param.avatar] 头像链接
|
||||
* @param { String } [param.nickName] 昵称
|
||||
* @returns { React.JSX.Element }
|
||||
*/
|
||||
export default function Message({ direction = 'left', avatar, nickName, children, ...props } = {}) {
|
||||
let isAtRight = direction == 'right'
|
||||
return (
|
||||
<div
|
||||
slot="trigger"
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: isAtRight ? "flex-end" : "flex-start",
|
||||
flexDirection: "column"
|
||||
}}
|
||||
{...props}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: isAtRight ? "flex-end" : "flex-start",
|
||||
}}>
|
||||
{
|
||||
// 发送者昵称(左)
|
||||
isAtRight && <span
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
fontSize: "90%"
|
||||
}}>
|
||||
{nickName}
|
||||
</span>
|
||||
}
|
||||
{
|
||||
// 发送者头像
|
||||
}
|
||||
<Avatar
|
||||
src={avatar}
|
||||
text={nickName}
|
||||
style={{
|
||||
width: "43px",
|
||||
height: "43px",
|
||||
margin: "11px"
|
||||
}} />
|
||||
{
|
||||
// 发送者昵称(右)
|
||||
!isAtRight && <span
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
fontSize: "90%"
|
||||
}}>
|
||||
{nickName}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<mdui-card
|
||||
variant="elevated"
|
||||
style={{
|
||||
maxWidth: 'var(--whitesilk-widget-message-maxwidth)', // (window.matchMedia('(pointer: fine)') && "50%") || (window.matchMedia('(pointer: coarse)') && "77%"),
|
||||
minWidth: "0%",
|
||||
[isAtRight ? "marginRight" : "marginLeft"]: "55px",
|
||||
marginTop: "-5px",
|
||||
padding: "15px",
|
||||
alignSelf: isAtRight ? "flex-end" : "flex-start",
|
||||
}}>
|
||||
<span
|
||||
id="msg"
|
||||
style={{
|
||||
fontSize: "94%"
|
||||
}}>
|
||||
{
|
||||
// 消息内容
|
||||
children
|
||||
}
|
||||
</span>
|
||||
</mdui-card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
18
client/ui/chat/MessageContainer.jsx
Normal file
18
client/ui/chat/MessageContainer.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* 消息容器
|
||||
* @returns { React.JSX.Element }
|
||||
*/
|
||||
export default function MessageContainer({ children, style, ...props } = {}) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
...style,
|
||||
}}
|
||||
{...props}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
27
client/ui/chat/SystemMessage.jsx
Normal file
27
client/ui/chat/SystemMessage.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* 一条系统提示消息
|
||||
* @returns { React.JSX.Element }
|
||||
*/
|
||||
export default function SystemMessage({ children } = {}) {
|
||||
return (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
display: 'flex',
|
||||
marginTop: '25px',
|
||||
marginBottom: '20px',
|
||||
}}>
|
||||
<mdui-card variant="filled"
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
paddingTop: '9px',
|
||||
paddingBottom: '9px',
|
||||
paddingLeft: '18px',
|
||||
paddingRight: '18px',
|
||||
fontSize: '92%',
|
||||
}}>
|
||||
{children}
|
||||
</mdui-card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
16
client/ui/main/ContactsListItem.jsx
Normal file
16
client/ui/main/ContactsListItem.jsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import Avatar from "../Avatar.jsx"
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
21
client/ui/main/RecentsListItem.jsx
Normal file
21
client/ui/main/RecentsListItem.jsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import Avatar from "../Avatar.jsx"
|
||||
|
||||
export default function RecentsListItem({ nickName, avatar, content }) {
|
||||
return (
|
||||
<mdui-list-item rounded style={{
|
||||
marginTop: '3px',
|
||||
marginBottom: '3px',
|
||||
}}>
|
||||
{nickName}
|
||||
<Avatar src={avatar} text={nickName} slot="icon" />
|
||||
<span slot="description"
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "inline-block",
|
||||
whiteSpace: "nowrap", /* 禁止换行 */
|
||||
overflow: "hidden", /* 隐藏溢出内容 */
|
||||
textOverflow: "ellipsis", /* 显示省略号 */
|
||||
}}>{content}</span>
|
||||
</mdui-list-item>
|
||||
)
|
||||
}
|
||||
17
client/ui/useEventListener.js
Normal file
17
client/ui/useEventListener.js
Normal 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])
|
||||
}
|
||||
Reference in New Issue
Block a user