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

添加 react-router, 使 CallackError 获得更多成员, 导出, (WIP) 图片查看器修改, 修复遗忘的 data.apply()

Browse Source
This commit is contained in:
CrescentLeaf
2025-12-06 15:45:43 +08:00
parent 29ea0c5b84
commit b85b6833b6
10 changed files with 209 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client-protocol/CallbackError.ts
View File

@@ -1,7 +1,11 @@
import ApiCallbackMessage from "./ApiCallbackMessage.ts"
export default class CallbackError extends Error {
declare code: number
declare data?: object
constructor(re: ApiCallbackMessage) {
super(`[${re.code}] ${re.msg}${re.data ? ` (data: ${JSON.stringify(re.data)})` : ''}`)
this.code = re.code
this.data = re.data
}
}

3
client-protocol/main.ts
View File

@@ -7,10 +7,13 @@ import GroupSettingsBean from "./bean/GroupSettingsBean.ts"
import JoinRequestBean from "./bean/JoinRequestBean.ts"
import MessageBean from "./bean/MessageBean.ts"
import RecentChatBean from "./bean/RecentChatBean.ts"
import LingChairClient from "./LingChairClient.ts"
import CallbackError from "./CallbackError.ts"
export {
LingChairClient,
CallbackError,
Chat,
User,

1
client/package.json
View File

@@ -15,6 +15,7 @@
"pinch-zoom-element": "1.1.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-router": "7.10.1",
"socket.io-client": "4.8.1",
"split.js": "1.3.2",
"ua-parser-js": "2.0.6"

5
client/performAuth.ts
View File

@@ -2,7 +2,9 @@ import data from "./Data.ts";
import getClient from "./getClient.ts"
/**
* 客户端上线
* 尝试进行验证
*
* 成功后自动保存到本地
*
* 优先级: 账号密码 > 提供刷新令牌 > 储存的刷新令牌
*
@@ -23,4 +25,5 @@ export default async function performAuth(args: {
}
data.refresh_token = getClient().getCachedRefreshToken()
data.access_token = getClient().getCachedAccessToken()
data.apply()
}

19
client/ui/ImageViewer.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { Dialog } from 'mdui'
import 'pinch-zoom-element'
import React from "react"
export default function ImageViewer() {
const dialogRef = React.useRef<Dialog>()
return <mdui-dialog ref={dialogRef} fullscreen="fullscreen">
<mdui-button-icon icon="open_in_new"
onclick="window.open(document.querySelector('#image-viewer-dialog-inner > *').src, '_blank')">
</mdui-button-icon>
<mdui-button-icon icon="close" onClick={() => dialogRef.current!.open = false}>
</mdui-button-icon>
{
// @ts-ignore 注册了这个元素
<pinch-zoom id="image-viewer-dialog-inner" style="width: var(--whitesilk-window-width); height: var(--whitesilk-window-height);"></pinch-zoom>
}
</mdui-dialog>
}

220
client/ui/Main.tsx
View File

@@ -1,104 +1,146 @@
import isMobileUI from "../utils/isMobileUI.ts"
import useEventListener from "../utils/useEventListener.ts"
import AvatarMySelf from "./AvatarMySelf.tsx"
import MainSharedContext from './MainSharedContext.ts'
import React from "react"
import { BrowserRouter, Outlet, Route, Routes } from "react-router"
import LoginDialog from "./main-page/LoginDialog.tsx"
import useAsyncEffect from "../utils/useAsyncEffect.ts"
import performAuth from "../performAuth.ts"
import { CallbackError } from "lingchair-client-protocol"
export default function Main() {
const [showLoginDialog, setShowLoginDialog] = React.useState(false)
// 多页面切换
const navigationRef = React.useRef<HTMLElement>()
const [currentShowPage, setCurrentShowPage] = React.useState('Recents')
type HTMLElementWithValue = HTMLElement & { value: string }
useEventListener(navigationRef, 'change', (event) => {
setCurrentShowPage((event.target as HTMLElementWithValue).value)
})
const sharedContext = {
openChatFragment: React.useRef()
ui_functions: React.useRef({
}),
setShowLoginDialog,
}
useAsyncEffect(async () => {
try {
await performAuth({})
} catch (e) {
if (e instanceof CallbackError)
if (e.code == 401 || e.code == 400)
setShowLoginDialog(true)
}
})
return (
<MainSharedContext.Provider value={sharedContext}>
<div style={{
display: "flex",
position: 'relative',
width: 'calc(var(--whitesilk-window-width) - 80px)',
height: 'var(--whitesilk-window-height)',
}}>
{
/**
* Default: 侧边列表提供列表切换
*/
!isMobileUI() ?
<mdui-navigation-rail contained value="Recents">
<mdui-button-icon slot="top">
<AvatarMySelf />
</mdui-button-icon>
<mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="favorite_border" active-icon="favorite" value="Contacts"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
<mdui-dropdown trigger="hover" slot="bottom">
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
<mdui-menu>
<mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
<mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
</mdui-navigation-rail>
/**
* Mobile: 底部导航栏提供列表切换
*/
: <mdui-top-app-bar style={{
position: 'sticky',
marginTop: '3px',
marginRight: '6px',
marginLeft: '15px',
top: '0px',
<BrowserRouter>
<Routes>
<Route path="/" element={(
<div style={{
display: "flex",
position: 'relative',
width: 'calc(var(--whitesilk-window-width) - 80px)',
height: 'var(--whitesilk-window-height)',
}}>
<mdui-top-app-bar-title>{
({
Recents: "最近对话",
Contacts: "收藏对话",
AllChats: "所有对话",
})['Recents']
}</mdui-top-app-bar-title>
<div style={{
flexGrow: 1,
}}></div>
<mdui-dropdown trigger="hover">
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
<mdui-menu>
<mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
<mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
<mdui-button-icon icon="settings"></mdui-button-icon>
<mdui-button-icon>
<AvatarMySelf />
</mdui-button-icon>
</mdui-top-app-bar>
}
{
/**
* Mobile: 指定高度的容器
* Default: 侧边列表
*/
<div style={isMobileUI() ? {
display: 'flex',
height: 'calc(100% - 80px - 67px)',
width: '100%',
} : {}} id="SideBar">
{
// 将子路由渲染到此处
<Outlet />
}
<LoginDialog open={showLoginDialog} />
{
/**
* Default: 侧边列表提供列表切换
*/
!isMobileUI() ?
<mdui-navigation-rail ref={navigationRef} contained value="Recents">
<mdui-button-icon slot="top">
<AvatarMySelf />
</mdui-button-icon>
</div>
}
{
/**
* Mobile: 底部导航栏提供列表切换
* Default: 侧边列表提供列表切换
*/
isMobileUI() && <mdui-navigation-bar label-visibility="selected" value="Recents" style={{
position: 'sticky',
bottom: '0',
}}>
<mdui-navigation-bar-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents">最近对话</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="favorite_border" active-icon="favorite" value="Contacts">收藏对话</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="chat--outlined" active-icon="chat--filled" value="AllChats">全部对话</mdui-navigation-bar-item>
</mdui-navigation-bar>
}
</div>
<mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="favorite_border" active-icon="favorite" value="Contacts"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
<mdui-dropdown trigger="hover" slot="bottom">
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
<mdui-menu>
<mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
<mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
</mdui-navigation-rail>
/**
* Mobile: 底部导航栏提供列表切换
*/
: <mdui-top-app-bar style={{
position: 'sticky',
marginTop: '3px',
marginRight: '6px',
marginLeft: '15px',
top: '0px',
}}>
<mdui-top-app-bar-title>{
({
Recents: "最近对话",
Contacts: "收藏对话",
AllChats: "所有对话",
})['Recents']
}</mdui-top-app-bar-title>
<div style={{
flexGrow: 1,
}}></div>
<mdui-dropdown trigger="hover">
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
<mdui-menu>
<mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
<mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
<mdui-button-icon icon="settings"></mdui-button-icon>
<mdui-button-icon>
<AvatarMySelf />
</mdui-button-icon>
</mdui-top-app-bar>
}
{
/**
* Mobile: 指定高度的容器
* Default: 侧边列表
*/
<div style={isMobileUI() ? {
display: 'flex',
height: 'calc(100% - 80px - 67px)',
width: '100%',
} : {}} id="SideBar">
</div>
}
{
/**
* Mobile: 底部导航栏提供列表切换
* Default: 侧边列表提供列表切换
*/
isMobileUI() && <mdui-navigation-bar ref={navigationRef} label-visibility="selected" value="Recents" style={{
position: 'sticky',
bottom: '0',
}}>
<mdui-navigation-bar-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents">最近对话</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="favorite_border" active-icon="favorite" value="Contacts">收藏对话</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="chat--outlined" active-icon="chat--filled" value="AllChats">全部对话</mdui-navigation-bar-item>
</mdui-navigation-bar>
}
</div>
)}>
</Route>
</Routes>
</BrowserRouter>
</MainSharedContext.Provider>
)
}

44
client/ui/main-page/LoginDialog.tsx Normal file
View File

@@ -0,0 +1,44 @@
import * as React from 'react'
import { Button, Dialog, TextField } from "mdui"
import performAuth from '../../performAuth.ts'
import useEventListener from '../../utils/useEventListener.ts'
import showSnackbar from '../../utils/showSnackbar.ts'
export default function LoginDialog({ ...props }: { open: boolean } & React.HTMLAttributes<Dialog>) {
const loginDialogRef = React.useRef<Dialog>(null)
const loginButtonRef = React.useRef<Button>(null)
const registerButtonRef = React.useRef<Button>(null)
const loginInputAccountRef = React.useRef<TextField>(null)
const loginInputPasswordRef = React.useRef<TextField>(null)
useEventListener(loginButtonRef, 'click', async () => {
const account = loginInputAccountRef.current!.value
const password = loginInputPasswordRef.current!.value
try {
await performAuth({
account: account,
password: password,
})
location.reload()
} catch (e) {
if (e instanceof Error)
showSnackbar({ message: '登录失败: ' + e.message })
}
})
return (
<mdui-dialog {...props} headline="登录" ref={loginDialogRef}>
<mdui-text-field label="用户 ID / 用户名" ref={loginInputAccountRef}></mdui-text-field>
<div style={{
height: "10px",
}}></div>
<mdui-text-field label="密码" type="password" toggle-password ref={loginInputPasswordRef}></mdui-text-field>
<mdui-button slot="action" variant="text" ref={registerButtonRef}>注册</mdui-button>
<mdui-button slot="action" variant="text" ref={loginButtonRef}>登录</mdui-button>
</mdui-dialog>
)
}

35
client/utils/openImageViewer.ts
View File

@@ -1,39 +1,4 @@
import { $ } from 'mdui/jq'
import 'pinch-zoom-element'
document.body.appendChild(new DOMParser().parseFromString(`
<mdui-dialog id="image-viewer-dialog" fullscreen="fullscreen">
<style>
#image-viewer-dialog::part(panel) {
background: rgba(0, 0, 0, 0) !important;
padding: 0 !important;
}
#image-viewer-dialog>mdui-button-icon[icon=close] {
z-index: 114514;
position: fixed;
top: 15px;
right: 15px;
color: #ffffff
}
#image-viewer-dialog>mdui-button-icon[icon=open_in_new] {
z-index: 114514;
position: fixed;
top: 15px;
right: 65px;
color: #ffffff
}
</style>
<mdui-button-icon icon="open_in_new"
onclick="window.open(document.querySelector('#image-viewer-dialog-inner > *').src, '_blank')">
</mdui-button-icon>
<mdui-button-icon icon="close" onclick="this.parentNode.open = false">
</mdui-button-icon>
<pinch-zoom id="image-viewer-dialog-inner" style="width: var(--whitesilk-window-width); height: var(--whitesilk-window-height);">
</pinch-zoom>
</mdui-dialog>
`, 'text/html').body.firstChild as Node)
export default function openImageViewer(src: string) {
$('#image-viewer-dialog-inner').empty()

2
client/utils/useEventListener.ts
View File

@@ -1,6 +1,6 @@
import * as React from 'react'
export default function useEventListener<T extends HTMLElement | null>(ref: React.MutableRefObject<T>, eventName: string, callback: (event: Event) => void) {
export default function useEventListener<T extends HTMLElement | undefined | null>(ref: React.MutableRefObject<T>, eventName: string, callback: (event: Event) => void) {
React.useEffect(() => {
ref.current!.addEventListener(eventName, callback)
return () => ref.current?.removeEventListener(eventName, callback)

4
package.json
View File

@@ -19,7 +19,7 @@
"express": "5.1.0",
"express-fileupload": "1.5.2",
"file-type": "21.0.0",
"socket.io": "4.8.1",
"lingchair-internal-shared": "*"
"lingchair-internal-shared": "*",
"socket.io": "4.8.1"
}
}