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

feat(wip): 前端, 以及編譯前端

Browse Source 
TODO: 修復 webpack (in mian.ts)
This commit is contained in:
CrescentLeaf
2025-08-30 15:36:36 +08:00
parent 5666bcba24
commit ca6aea2902
16 changed files with 674 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
client/index.html Normal file
View File

@@ -0,0 +1,108 @@
<!doctype html>
<html lang="zh-CN" class="mdui-theme-auto">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
<meta name="renderer" content="webkit" />
<!-- UI -->
<script src="https://unpkg.com/mdui@2/mdui.global.js">
</script>
<link rel="icon" href="icon.ico" />
<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;
height: 100%;
}
html {
margin: 0 0 0 0;
height: 100%;
}
/* 防止小尺寸图片模糊*/
* {
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>
<div id="app"></div>
<script nomodule>
alert('很抱歉, 此应用无法在较旧的浏览器运行, 请使用基于 Chromium 89+ 的浏览器(内核)使用 :(')
</script>
<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>
</html>

40
client/test.html Normal file
View File

@@ -0,0 +1,40 @@
<!doctype html>
<html lang="zh-CN" class="mdui-theme-auto">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
<meta name="renderer" content="webkit" />
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
<title>TheWhiteSilk Debugger</title>
</head>
<body>
<mdui-button id="send">Send</mdui-button>
<mdui-text-field id="edittext" autosize></mdui-text-field>
<div id="out">
</div>
<script>
const socket = io()
$('#edittext').val(`{
"method": "",
"args": {
}
}`)
$('#send').click(() => {
socket.emit("the_white_silk", JSON.parse($('#edittext').val()), (response) => {
$('#out').text(JSON.stringify(response))
});
})
</script>
</body>
</html>

283
client/ui/App.jsx Normal file
View 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
View 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
View File

@@ -0,0 +1,3 @@
export default function ChatFragment() {
}

83
client/ui/chat/Message.jsx Normal file
View 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
View 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
View 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
View 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
View 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
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])
}

7
deno.jsonc
View File

@@ -6,8 +6,11 @@
"imports": {
"chalk": "npm:chalk@5.4.1",
"file-type": "npm:file-type@21.0.0",
"webpack": "npm:webpack@5.101.2",
"express": "npm:express@5.1.0",
"socket.io": "npm:socket.io@4.8.1"
"socket.io": "npm:socket.io@4.8.1",
"webpack": "npm:webpack@5.101.2",
"@babel/preset-env": "npm:@babel/preset-env@^7.26.9",
"@babel/preset-react": "npm:@babel/preset-react@^7.26.3"
}
}

2
server/api/ApiManager.ts
View File

@@ -1,6 +1,6 @@
import HttpServerLike from '../types/HttpServerLike.ts'
import UserApi from "./UserApi.ts"
import SocketIo from "socket.io"
import * as SocketIo from "socket.io"
import ApiCallbackMessage from "../types/ApiCallbackMessage.ts"
import EventCallbackFunction from "../types/EventCallbackFunction.ts"

9
server/main.ts
View File

@@ -1,10 +1,11 @@
import ApiManager from "./api/ApiManager.ts"
import express from 'express'
import SocketIo from 'socket.io'
import * as SocketIo from 'socket.io'
import HttpServerLike from "./types/HttpServerLike.ts"
import config from './config.ts'
import http from 'node:http'
import https from 'node:https'
import web_packer from './web_packer.ts'
const app = express()
const httpServer: HttpServerLike = (
@@ -21,3 +22,9 @@ ApiManager.initEvents()
ApiManager.initAllApis()
httpServer.listen(config.server.listen)
web_packer?.run((err, status) => {
if (err) throw err
console.log("前端頁面已編譯完成")
web_packer?.close(() => {})
})

29
server/web_packer.ts Normal file
View File

@@ -0,0 +1,29 @@
import webpack from 'webpack'
import config from "./config.ts"
import path from 'node:path'
export default webpack({
mode: 'production',
devtool: 'source-map',
entry: './client/ui/App.jsx',
output: {
filename: 'bundle.js',
path: path.resolve(import.meta.dirname as string, config.data_path, 'page_compiled'),
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
use: {
loader: "babel-loader",
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
],
},
},
},
],
},
})

5
webpack_config.ts
View File

@@ -1,5 +0,0 @@
import webpack from 'webpack'
export default webpack({
})