Compare commits
15 Commits
eaf0f98058
...
082817d6cd
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
082817d6cd | ||
|
|
ee79e3eefa | ||
|
|
6a1084eeca | ||
|
|
71e6d24d6e | ||
|
|
7686a9b7d1 | ||
|
|
4837c17c2e | ||
|
|
3d367711cc | ||
|
|
6f006f38a4 | ||
|
|
cb4aeaed21 | ||
|
|
791baf474c | ||
|
|
468de4f439 | ||
|
|
2ec4f634ae | ||
|
|
8f7e61dfd2 | ||
|
|
212c2fa5dc | ||
|
|
dd88e8d1b8 |
@@ -3,11 +3,14 @@ export type CallMethod =
|
|||||||
"User.register" |
|
"User.register" |
|
||||||
"User.login" |
|
"User.login" |
|
||||||
|
|
||||||
"User.setNickName" |
|
|
||||||
"User.setUserName" |
|
|
||||||
"User.setAvatar" |
|
"User.setAvatar" |
|
||||||
|
"User.updateProfile" |
|
||||||
"User.getMyInfo" |
|
"User.getMyInfo" |
|
||||||
|
|
||||||
|
"User.getMyContacts" |
|
||||||
|
"User.addContact" |
|
||||||
|
"User.removeContacts" |
|
||||||
|
|
||||||
"Chat.getInfo" |
|
"Chat.getInfo" |
|
||||||
"Chat.sendMessage" |
|
"Chat.sendMessage" |
|
||||||
"Chat.getMessageHistory"
|
"Chat.getMessageHistory"
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { io, Socket } from 'socket.io-client'
|
|||||||
import { CallMethod, ClientEvent } from './ApiDeclare.ts'
|
import { CallMethod, ClientEvent } from './ApiDeclare.ts'
|
||||||
import ApiCallbackMessage from './ApiCallbackMessage.ts'
|
import ApiCallbackMessage from './ApiCallbackMessage.ts'
|
||||||
import User from "./client_data/User.ts"
|
import User from "./client_data/User.ts"
|
||||||
|
import data from "../Data.ts";
|
||||||
|
|
||||||
type UnknownObject = { [key: string]: unknown }
|
type UnknownObject = { [key: string]: unknown }
|
||||||
|
|
||||||
@@ -26,7 +27,11 @@ class Client {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
static invoke(method: CallMethod, args: UnknownObject = {}, timeout: number = 5000): Promise<ApiCallbackMessage> {
|
static invoke(method: CallMethod, args: UnknownObject = {}, timeout: number = 5000): Promise<ApiCallbackMessage> {
|
||||||
if (this.socket == null) throw new Error("客戶端未與伺服器端建立連接!")
|
if (this.socket == null) {
|
||||||
|
return new Promise((reslove) => {
|
||||||
|
setTimeout(async () => reslove(await this.invoke(method, args, timeout)), 500)
|
||||||
|
})
|
||||||
|
}
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
this.socket!.timeout(timeout).emit("The_White_Silk", method, args, (err: string, res: ApiCallbackMessage) => {
|
this.socket!.timeout(timeout).emit("The_White_Silk", method, args, (err: string, res: ApiCallbackMessage) => {
|
||||||
if (err) return reject(err)
|
if (err) return reject(err)
|
||||||
@@ -39,11 +44,14 @@ class Client {
|
|||||||
access_token: token
|
access_token: token
|
||||||
}, timeout)
|
}, timeout)
|
||||||
if (re.code == 200)
|
if (re.code == 200)
|
||||||
this.myUserProfile = (await Client.invoke("User.getMyInfo", {
|
await this.updateCachedProfile()
|
||||||
token: token
|
|
||||||
})).data as unknown as User
|
|
||||||
return re
|
return re
|
||||||
}
|
}
|
||||||
|
static async updateCachedProfile() {
|
||||||
|
this.myUserProfile = (await Client.invoke("User.getMyInfo", {
|
||||||
|
token: data.access_token
|
||||||
|
})).data as unknown as User
|
||||||
|
}
|
||||||
static on(eventName: ClientEvent, func: (data: UnknownObject) => UnknownObject) {
|
static on(eventName: ClientEvent, func: (data: UnknownObject) => UnknownObject) {
|
||||||
this.events[eventName] = func
|
this.events[eventName] = func
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
export default class Chat {
|
export default class Chat {
|
||||||
declare type: "paivate" | "group"
|
declare type: "paivate" | "group"
|
||||||
declare id: string
|
declare id: string
|
||||||
declare title?: string
|
declare title: string
|
||||||
declare avatar_file_hash?: string
|
declare avatar_file_hash?: string
|
||||||
declare user_a_id?: string
|
declare user_a_id?: string
|
||||||
declare user_b_id?: string
|
declare user_b_id?: string
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
export default class RecentChat {
|
import Chat from "./Chat.ts"
|
||||||
declare id: string
|
|
||||||
declare title: string
|
export default class RecentChat extends Chat {
|
||||||
declare avatar?: string
|
|
||||||
declare content: string
|
declare content: string
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,6 +18,8 @@ import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
|
|||||||
import ContactsList from "./main/ContactsList.tsx"
|
import ContactsList from "./main/ContactsList.tsx"
|
||||||
import RecentsList from "./main/RecentsList.tsx"
|
import RecentsList from "./main/RecentsList.tsx"
|
||||||
import useAsyncEffect from "./useAsyncEffect.ts"
|
import useAsyncEffect from "./useAsyncEffect.ts"
|
||||||
|
import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx";
|
||||||
|
import Chat from "../api/client_data/Chat.ts";
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
namespace React {
|
namespace React {
|
||||||
@@ -31,32 +33,7 @@ declare global {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [recentsList, setRecentsList] = React.useState([
|
const [recentsList, setRecentsList] = React.useState([] as RecentChat[])
|
||||||
{
|
|
||||||
id: '0',
|
|
||||||
avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
|
|
||||||
title: "麻油衣酱",
|
|
||||||
content: "成步堂君, 我又坐牢了("
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
|
|
||||||
title: "Maya Fey",
|
|
||||||
content: "我是绫里真宵, 是一名灵媒师~"
|
|
||||||
},
|
|
||||||
] as RecentChat[])
|
|
||||||
const [contactsList, setContactsList] = React.useState([
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
|
|
||||||
nickname: "麻油衣酱",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '0',
|
|
||||||
avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
|
|
||||||
nickname: "Maya Fey",
|
|
||||||
},
|
|
||||||
] as User[])
|
|
||||||
|
|
||||||
const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
|
const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
|
||||||
|
|
||||||
@@ -80,7 +57,10 @@ export default function App() {
|
|||||||
userProfileDialogRef.current!.open = true
|
userProfileDialogRef.current!.open = true
|
||||||
})
|
})
|
||||||
|
|
||||||
const [myUserProfileCache, setMyUserProfileCache]: [User, React.Dispatch<React.SetStateAction<User>>] = React.useState(null as unknown as User)
|
const chatInfoDialogRef = React.useRef<Dialog>(null)
|
||||||
|
const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
|
||||||
|
|
||||||
|
const [myUserProfileCache, setMyUserProfileCache] = React.useState(null as unknown as User)
|
||||||
|
|
||||||
const [isShowChatFragment, setIsShowChatFragment] = React.useState(false)
|
const [isShowChatFragment, setIsShowChatFragment] = React.useState(false)
|
||||||
|
|
||||||
@@ -133,6 +113,14 @@ export default function App() {
|
|||||||
userProfileDialogRef={userProfileDialogRef as any}
|
userProfileDialogRef={userProfileDialogRef as any}
|
||||||
user={myUserProfileCache} />
|
user={myUserProfileCache} />
|
||||||
|
|
||||||
|
<ChatInfoDialog
|
||||||
|
chatInfoDialogRef={chatInfoDialogRef as any}
|
||||||
|
openChatFragment={(id) => {
|
||||||
|
setCurrentChatId(id)
|
||||||
|
setIsShowChatFragment(true)
|
||||||
|
}}
|
||||||
|
chat={chatInfo} />
|
||||||
|
|
||||||
<mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
|
<mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
|
||||||
<mdui-button-icon slot="top">
|
<mdui-button-icon slot="top">
|
||||||
<Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyUserProfileDialogButtonRef} />
|
<Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyUserProfileDialogButtonRef} />
|
||||||
@@ -162,9 +150,8 @@ export default function App() {
|
|||||||
{
|
{
|
||||||
// 联系人列表
|
// 联系人列表
|
||||||
<ContactsList
|
<ContactsList
|
||||||
openChatFragment={(id) => {
|
setChatInfo={setChatInfo}
|
||||||
setIsShowChatFragment(true)
|
chatInfoDialogRef={chatInfoDialogRef as any}
|
||||||
}}
|
|
||||||
display={navigationItemSelected == "Contacts"} />
|
display={navigationItemSelected == "Contacts"} />
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ export default function Avatar({
|
|||||||
else if (text != null)
|
else if (text != null)
|
||||||
return <mdui-avatar ref={avatarRef} {...props}>
|
return <mdui-avatar ref={avatarRef} {...props}>
|
||||||
{
|
{
|
||||||
text.substring(0, 0)
|
text.substring(0, 1)
|
||||||
}
|
}
|
||||||
</mdui-avatar>
|
</mdui-avatar>
|
||||||
else
|
else
|
||||||
|
|||||||
@@ -37,7 +37,26 @@ export default function ChatFragment({ target, ...props }: Args) {
|
|||||||
setChatInfo(re.data as Chat)
|
setChatInfo(re.data as Chat)
|
||||||
}, [target])
|
}, [target])
|
||||||
|
|
||||||
console.log(tabItemSelected)
|
let page = 0
|
||||||
|
async function loadMore() {
|
||||||
|
const re = await Client.invoke("Chat.getMessageHistory", {
|
||||||
|
token: data.access_token,
|
||||||
|
target,
|
||||||
|
page,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (checkApiSuccessOrSncakbar(re, "拉取歷史記錄失敗")) return
|
||||||
|
page++
|
||||||
|
setMessagesList(messagesList.concat())
|
||||||
|
}
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{
|
<div style={{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
|
|||||||
@@ -4,20 +4,28 @@ import useAsyncEffect from "../useAsyncEffect.ts"
|
|||||||
import Client from "../../api/Client.ts"
|
import Client from "../../api/Client.ts"
|
||||||
import data from "../../Data.ts"
|
import data from "../../Data.ts"
|
||||||
import { Dialog } from "mdui"
|
import { Dialog } from "mdui"
|
||||||
|
import Avatar from "../Avatar.tsx";
|
||||||
|
import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
|
||||||
|
|
||||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||||
chat: Chat
|
chat: Chat
|
||||||
|
openChatFragment: (id: string) => void
|
||||||
chatInfoDialogRef: React.MutableRefObject<Dialog>
|
chatInfoDialogRef: React.MutableRefObject<Dialog>
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ChatInfoDialog({ chat, chatInfoDialogRef }: Args) {
|
export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragment }: Args) {
|
||||||
const [isMySelf, setIsMySelf] = React.useState(false)
|
const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
|
||||||
|
const isMySelf = Client.myUserProfile?.id == chatInfo?.user_a_id && Client.myUserProfile?.id == chatInfo?.user_b_id
|
||||||
|
|
||||||
useAsyncEffect(async () => {
|
useAsyncEffect(async () => {
|
||||||
|
if (chat == null) return
|
||||||
const re = await Client.invoke("Chat.getInfo", {
|
const re = await Client.invoke("Chat.getInfo", {
|
||||||
token: data.access_token,
|
token: data.access_token,
|
||||||
target: chat.id,
|
target: chat.id,
|
||||||
})
|
})
|
||||||
|
if (re.code != 200)
|
||||||
|
return checkApiSuccessOrSncakbar(re, '獲取對話訊息失敗')
|
||||||
|
setChatInfo(re.data!.chat_info as Chat)
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -26,14 +34,14 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef }: Args) {
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
}}>
|
}}>
|
||||||
<Avatar src={chat?.avatar} text={chat?.nickname} style={{
|
<Avatar src={chat?.avatar as string} text={chat?.nickname as string} style={{
|
||||||
width: '50px',
|
width: '50px',
|
||||||
height: '50px',
|
height: '50px',
|
||||||
}} />
|
}} />
|
||||||
<span style={{
|
<span style={{
|
||||||
marginLeft: "15px",
|
marginLeft: "15px",
|
||||||
fontSize: '16.5px',
|
fontSize: '16.5px',
|
||||||
}}>{user?.nickname}</span>
|
}}>{chat?.title}</span>
|
||||||
</div>
|
</div>
|
||||||
<mdui-divider style={{
|
<mdui-divider style={{
|
||||||
marginTop: "10px",
|
marginTop: "10px",
|
||||||
@@ -41,14 +49,10 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef }: Args) {
|
|||||||
}}></mdui-divider>
|
}}></mdui-divider>
|
||||||
|
|
||||||
<mdui-list>
|
<mdui-list>
|
||||||
{!isMySelf && <mdui-list-item icon="edit" rounded>編輯聯絡人訊息</mdui-list-item>}
|
<mdui-list-item icon="chat" rounded onClick={() => {
|
||||||
{
|
chatInfoDialogRef.current!.open = false
|
||||||
isMySelf && <>
|
openChatFragment(chat.id)
|
||||||
<mdui-list-item icon="edit" rounded>編輯資料</mdui-list-item>
|
}}>對話</mdui-list-item>
|
||||||
<mdui-list-item icon="settings" rounded>賬號設定</mdui-list-item>
|
|
||||||
<mdui-list-item icon="lock" rounded>隱私設定</mdui-list-item>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
</mdui-list>
|
</mdui-list>
|
||||||
</mdui-dialog>
|
</mdui-dialog>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -39,20 +39,20 @@ export default function UserProfileDialog({
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
const userProfileEditDialogRef = React.useRef<Dialog>(null)
|
||||||
<mdui-dialog close-on-overlay-click close-on-esc ref={userProfileDialogRef}>
|
const editNickNameRef = React.useRef<TextField>(null)
|
||||||
<div style={{
|
const editUserNameRef = React.useRef<TextField>(null)
|
||||||
display: "none"
|
|
||||||
}}>
|
|
||||||
<input type="file" name="選擇頭像" ref={chooseAvatarFileRef}
|
|
||||||
accept="image/*" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
return (<>
|
||||||
|
{
|
||||||
|
// 公用 - 資料卡
|
||||||
|
}
|
||||||
|
<mdui-dialog close-on-overlay-click close-on-esc ref={userProfileDialogRef}>
|
||||||
<div style={{
|
<div style={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
}}>
|
}}>
|
||||||
<Avatar src={user?.avatar} text={user?.nickname} avatarRef={editAvatarButtonRef} style={{
|
<Avatar src={user?.avatar} text={user?.nickname} style={{
|
||||||
width: '50px',
|
width: '50px',
|
||||||
height: '50px',
|
height: '50px',
|
||||||
}} />
|
}} />
|
||||||
@@ -70,12 +70,58 @@ export default function UserProfileDialog({
|
|||||||
{!isMySelf && <mdui-list-item icon="edit" rounded>編輯聯絡人訊息</mdui-list-item>}
|
{!isMySelf && <mdui-list-item icon="edit" rounded>編輯聯絡人訊息</mdui-list-item>}
|
||||||
{
|
{
|
||||||
isMySelf && <>
|
isMySelf && <>
|
||||||
<mdui-list-item icon="edit" rounded>編輯資料</mdui-list-item>
|
<mdui-list-item icon="edit" rounded onClick={() => userProfileEditDialogRef.current!.open = true}>編輯資料</mdui-list-item>
|
||||||
<mdui-list-item icon="settings" rounded>賬號設定</mdui-list-item>
|
<mdui-list-item icon="settings" rounded>賬號設定</mdui-list-item>
|
||||||
<mdui-list-item icon="lock" rounded>隱私設定</mdui-list-item>
|
<mdui-list-item icon="lock" rounded>隱私設定</mdui-list-item>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
</mdui-list>
|
</mdui-list>
|
||||||
</mdui-dialog>
|
</mdui-dialog>
|
||||||
)
|
{
|
||||||
|
// 個人資料編輯
|
||||||
|
}
|
||||||
|
<mdui-dialog close-on-overlay-click close-on-esc ref={userProfileEditDialogRef}>
|
||||||
|
<div style={{
|
||||||
|
display: "none"
|
||||||
|
}}>
|
||||||
|
<input type="file" name="選擇頭像" ref={chooseAvatarFileRef}
|
||||||
|
accept="image/*" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}>
|
||||||
|
<Avatar src={user?.avatar} text={user?.nickname} avatarRef={editAvatarButtonRef} style={{
|
||||||
|
width: '50px',
|
||||||
|
height: '50px',
|
||||||
|
}} />
|
||||||
|
<mdui-text-field variant="outlined" placeholder="昵稱" ref={editNickNameRef as any} style={{
|
||||||
|
marginLeft: "15px",
|
||||||
|
}} value={user?.nickname}></mdui-text-field>
|
||||||
|
</div>
|
||||||
|
<mdui-divider style={{
|
||||||
|
marginTop: "10px",
|
||||||
|
marginBottom: "10px",
|
||||||
|
}}></mdui-divider>
|
||||||
|
|
||||||
|
<mdui-text-field variant="outlined" label="用戶名" value={user?.username || ''} ref={editUserNameRef as any}></mdui-text-field>
|
||||||
|
|
||||||
|
<mdui-button slot="action" variant="text" onClick={() => userProfileEditDialogRef.current!.open = false}>取消</mdui-button>
|
||||||
|
<mdui-button slot="action" variant="text" onClick={async () => {
|
||||||
|
const re = await Client.invoke("User.updateProfile", {
|
||||||
|
token: data.access_token,
|
||||||
|
nickname: editNickNameRef.current?.value,
|
||||||
|
username: editUserNameRef.current?.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (checkApiSuccessOrSncakbar(re, "修改失敗")) return
|
||||||
|
snackbar({
|
||||||
|
message: "修改成功 (刷新頁面以更新)",
|
||||||
|
placement: "top",
|
||||||
|
})
|
||||||
|
userProfileEditDialogRef.current!.open = false
|
||||||
|
}}>更新</mdui-button>
|
||||||
|
</mdui-dialog>
|
||||||
|
</>)
|
||||||
}
|
}
|
||||||
@@ -1,44 +1,42 @@
|
|||||||
import React from "react"
|
import React from "react"
|
||||||
import User from "../../api/client_data/User.ts"
|
|
||||||
import ContactsListItem from "./ContactsListItem.tsx"
|
import ContactsListItem from "./ContactsListItem.tsx"
|
||||||
import useEventListener from "../useEventListener.ts"
|
import useEventListener from "../useEventListener.ts"
|
||||||
import { ListItem, TextField } from "mdui"
|
import { Dialog, ListItem, TextField } from "mdui"
|
||||||
import useAsyncEffect from "../useAsyncEffect.ts"
|
import useAsyncEffect from "../useAsyncEffect.ts"
|
||||||
import Client from "../../api/Client.ts"
|
import Client from "../../api/Client.ts"
|
||||||
import data from "../../Data.ts"
|
import data from "../../Data.ts"
|
||||||
|
import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
|
||||||
|
import Chat from "../../api/client_data/Chat.ts"
|
||||||
|
|
||||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||||
display: boolean
|
display: boolean
|
||||||
openChatFragment: (id: string) => void
|
chatInfoDialogRef: React.MutableRefObject<Dialog>
|
||||||
|
setChatInfo: React.Dispatch<React.SetStateAction<Chat>>
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ContactsList({
|
export default function ContactsList({
|
||||||
display,
|
display,
|
||||||
openChatFragment,
|
setChatInfo,
|
||||||
|
chatInfoDialogRef,
|
||||||
...props
|
...props
|
||||||
}: Args) {
|
}: Args) {
|
||||||
const searchRef = React.useRef<HTMLElement>(null)
|
const searchRef = React.useRef<HTMLElement>(null)
|
||||||
const [isMultiSelecting, setIsMultiSelecting] = React.useState(false)
|
const [isMultiSelecting, setIsMultiSelecting] = React.useState(false)
|
||||||
const [searchText, setSearchText] = React.useState('')
|
const [searchText, setSearchText] = React.useState('')
|
||||||
const [contactsList, setContactsList] = React.useState([
|
const [contactsList, setContactsList] = React.useState<Chat[]>([])
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
|
|
||||||
nickname: "麻油衣酱",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '0',
|
|
||||||
avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
|
|
||||||
nickname: "Maya Fey",
|
|
||||||
},
|
|
||||||
] as User[])
|
|
||||||
|
|
||||||
useEventListener(searchRef, 'input', (e) => {
|
useEventListener(searchRef, 'input', (e) => {
|
||||||
setSearchText((e.target as unknown as TextField).value)
|
setSearchText((e.target as unknown as TextField).value)
|
||||||
})
|
})
|
||||||
|
|
||||||
useAsyncEffect(async () => {
|
useAsyncEffect(async () => {
|
||||||
|
const re = await Client.invoke("User.getMyContacts", {
|
||||||
|
token: data.access_token,
|
||||||
|
})
|
||||||
|
if (re.code != 200)
|
||||||
|
return checkApiSuccessOrSncakbar(re, "获取联络人列表失败")
|
||||||
|
|
||||||
|
setContactsList(re.data!.contacts_list as Chat[])
|
||||||
})
|
})
|
||||||
|
|
||||||
return <mdui-list style={{
|
return <mdui-list style={{
|
||||||
@@ -63,21 +61,21 @@ export default function ContactsList({
|
|||||||
}} icon={ isMultiSelecting ? "done" : "edit"} onClick={() => setIsMultiSelecting(!isMultiSelecting)}>{ isMultiSelecting ? "關閉多選" : "多選模式" }</mdui-list-item> */}
|
}} icon={ isMultiSelecting ? "done" : "edit"} onClick={() => setIsMultiSelecting(!isMultiSelecting)}>{ isMultiSelecting ? "關閉多選" : "多選模式" }</mdui-list-item> */}
|
||||||
|
|
||||||
{
|
{
|
||||||
contactsList.filter((user) =>
|
contactsList.filter((chat) =>
|
||||||
searchText == '' ||
|
searchText == '' ||
|
||||||
user.nickname.includes(searchText) ||
|
chat.title.includes(searchText) ||
|
||||||
user.id.includes(searchText) ||
|
chat.id.includes(searchText)
|
||||||
user.username?.includes(searchText)
|
|
||||||
).map((v) =>
|
).map((v) =>
|
||||||
<ContactsListItem
|
<ContactsListItem
|
||||||
/* active={!isMultiSelecting && false}
|
// active={!isMultiSelecting && false}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
const self = (e.target as ListItem)
|
const self = (e.target as ListItem)
|
||||||
if (isMultiSelecting)
|
/*if (isMultiSelecting)
|
||||||
self.active = !self.active
|
self.active = !self.active
|
||||||
else
|
else*/
|
||||||
void(0)
|
setChatInfo(v)
|
||||||
}} */
|
chatInfoDialogRef.current!.open = true
|
||||||
|
}}
|
||||||
key={v.id}
|
key={v.id}
|
||||||
contact={v} />
|
contact={v} />
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,15 +1,14 @@
|
|||||||
import { ListItem } from "mdui";
|
import Chat from "../../api/client_data/Chat.ts"
|
||||||
import User from "../../api/client_data/User.ts"
|
|
||||||
import Avatar from "../Avatar.tsx"
|
import Avatar from "../Avatar.tsx"
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||||
contact: User
|
contact: Chat
|
||||||
active?: boolean
|
active?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ContactsListItem({ contact, ...prop }: Args) {
|
export default function ContactsListItem({ contact, ...prop }: Args) {
|
||||||
const { id, nickname, avatar } = contact
|
const { id, title, avatar } = contact
|
||||||
const ref = React.useRef<HTMLElement>(null)
|
const ref = React.useRef<HTMLElement>(null)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -20,8 +19,8 @@ export default function ContactsListItem({ contact, ...prop }: Args) {
|
|||||||
}} {...prop as any}>
|
}} {...prop as any}>
|
||||||
<span style={{
|
<span style={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
}}>{nickname}</span>
|
}}>{title}</span>
|
||||||
<Avatar src={avatar} text="title" slot="icon" />
|
<Avatar src={avatar as string} text={title} slot="icon" />
|
||||||
</mdui-list-item>
|
</mdui-list-item>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,9 +3,8 @@ export type CallMethod =
|
|||||||
"User.register" |
|
"User.register" |
|
||||||
"User.login" |
|
"User.login" |
|
||||||
|
|
||||||
"User.setNickName" |
|
|
||||||
"User.setUserName" |
|
|
||||||
"User.setAvatar" |
|
"User.setAvatar" |
|
||||||
|
"User.updateProfile" |
|
||||||
"User.getMyInfo" |
|
"User.getMyInfo" |
|
||||||
|
|
||||||
"User.getMyContacts" |
|
"User.getMyContacts" |
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import Chat from "../data/Chat.ts";
|
import Chat from "../data/Chat.ts";
|
||||||
import ChatPrivate from "../data/ChatPrivate.ts";
|
import ChatPrivate from "../data/ChatPrivate.ts";
|
||||||
|
import MessagesManager from "../data/MessagesManager.ts";
|
||||||
import User from "../data/User.ts"
|
import User from "../data/User.ts"
|
||||||
import BaseApi from "./BaseApi.ts"
|
import BaseApi from "./BaseApi.ts"
|
||||||
import TokenManager from "./TokenManager.ts"
|
import TokenManager from "./TokenManager.ts"
|
||||||
@@ -9,6 +10,11 @@ export default class ChatApi extends BaseApi {
|
|||||||
return "Chat"
|
return "Chat"
|
||||||
}
|
}
|
||||||
override onInit(): void {
|
override onInit(): void {
|
||||||
|
/**
|
||||||
|
* 獲取對話訊息
|
||||||
|
* @param token 令牌
|
||||||
|
* @param target 目標對話
|
||||||
|
*/
|
||||||
this.registerEvent("Chat.getInfo", (args) => {
|
this.registerEvent("Chat.getInfo", (args) => {
|
||||||
if (this.checkArgsMissing(args, ['token', 'target'])) return {
|
if (this.checkArgsMissing(args, ['token', 'target'])) return {
|
||||||
msg: "參數缺失",
|
msg: "參數缺失",
|
||||||
@@ -36,8 +42,8 @@ export default class ChatApi extends BaseApi {
|
|||||||
msg: "成功",
|
msg: "成功",
|
||||||
data: {
|
data: {
|
||||||
type: chat.bean.type,
|
type: chat.bean.type,
|
||||||
title: chat.getTitleForPrivate(mine),
|
title: chat.getTitle(mine),
|
||||||
avatar: chat.bean.avatar_file_hash ? "uploaded_files/" + chat.bean.avatar_file_hash : chat.bean.avatar_file_hash
|
avatar: chat.getAvatarFileHash(mine) ? "uploaded_files/" + chat.getAvatarFileHash(mine) : undefined
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -47,6 +53,12 @@ export default class ChatApi extends BaseApi {
|
|||||||
msg: "not implmented",
|
msg: "not implmented",
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
/**
|
||||||
|
* 發送訊息
|
||||||
|
* @param token 令牌
|
||||||
|
* @param target 目標對話
|
||||||
|
* @param
|
||||||
|
*/
|
||||||
this.registerEvent("Chat.sendMessage", (args) => {
|
this.registerEvent("Chat.sendMessage", (args) => {
|
||||||
if (this.checkArgsMissing(args, ['token', 'target'])) return {
|
if (this.checkArgsMissing(args, ['token', 'target'])) return {
|
||||||
msg: "參數缺失",
|
msg: "參數缺失",
|
||||||
@@ -64,8 +76,14 @@ export default class ChatApi extends BaseApi {
|
|||||||
msg: "未實現",
|
msg: "未實現",
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
/**
|
||||||
|
* 拉取歷史訊息
|
||||||
|
* @param token 令牌
|
||||||
|
* @param target 目標對話
|
||||||
|
* @param page 頁面
|
||||||
|
*/
|
||||||
this.registerEvent("Chat.getMessageHistory", (args) => {
|
this.registerEvent("Chat.getMessageHistory", (args) => {
|
||||||
if (this.checkArgsMissing(args, ['token', 'target'])) return {
|
if (this.checkArgsMissing(args, ['token', 'target', 'page'])) return {
|
||||||
msg: "參數缺失",
|
msg: "參數缺失",
|
||||||
code: 400,
|
code: 400,
|
||||||
}
|
}
|
||||||
@@ -76,9 +94,18 @@ export default class ChatApi extends BaseApi {
|
|||||||
msg: "令牌無效",
|
msg: "令牌無效",
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const chat = Chat.findById(args.target as string)
|
||||||
|
if (chat == null) return {
|
||||||
|
code: 404,
|
||||||
|
msg: "對話不存在",
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
code: 501,
|
code: 200,
|
||||||
msg: "未實現",
|
msg: "成功",
|
||||||
|
data: {
|
||||||
|
messages: MessagesManager.getInstanceForChat(chat).getMessagesWithPage(),
|
||||||
|
},
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ export default class UserApi extends BaseApi {
|
|||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
const access_token = TokenManager.decode(args.access_token as string)
|
const access_token = TokenManager.decode(args.access_token as string)
|
||||||
|
|
||||||
if (access_token.expired_time < Date.now()) return {
|
if (access_token.expired_time < Date.now()) return {
|
||||||
msg: "登錄令牌失效",
|
msg: "登錄令牌失效",
|
||||||
code: 401,
|
code: 401,
|
||||||
@@ -129,13 +129,13 @@ export default class UserApi extends BaseApi {
|
|||||||
code: 200,
|
code: 200,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
// 更新昵稱
|
// 更新資料
|
||||||
this.registerEvent("User.setNickName", (args) => {
|
this.registerEvent("User.updateProfile", (args) => {
|
||||||
if (this.checkArgsMissing(args, ['nickname', 'token'])) return {
|
if (this.checkArgsMissing(args, ['token'])) return {
|
||||||
msg: "參數缺失",
|
msg: "參數缺失",
|
||||||
code: 400,
|
code: 400,
|
||||||
}
|
}
|
||||||
|
|
||||||
const token = TokenManager.decode(args.token as string)
|
const token = TokenManager.decode(args.token as string)
|
||||||
if (!this.checkToken(token)) return {
|
if (!this.checkToken(token)) return {
|
||||||
code: 401,
|
code: 401,
|
||||||
@@ -143,28 +143,10 @@ export default class UserApi extends BaseApi {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const user = User.findById(token.author)
|
const user = User.findById(token.author)
|
||||||
user!.setNickName(args.nickname as string)
|
if (args.nickname != null)
|
||||||
|
user!.setNickName(args.nickname as string)
|
||||||
return {
|
if (args.username != null)
|
||||||
msg: "成功",
|
user!.setUserName(args.username as string)
|
||||||
code: 200,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 更新用戶名
|
|
||||||
this.registerEvent("User.setUserName", (args) => {
|
|
||||||
if (this.checkArgsMissing(args, ['username', 'token'])) return {
|
|
||||||
msg: "參數缺失",
|
|
||||||
code: 400,
|
|
||||||
}
|
|
||||||
|
|
||||||
const token = TokenManager.decode(args.token as string)
|
|
||||||
if (!this.checkToken(token)) return {
|
|
||||||
code: 401,
|
|
||||||
msg: "令牌無效",
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = User.findById(token.author)
|
|
||||||
user!.setUserName(args.username as string)
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
msg: "成功",
|
msg: "成功",
|
||||||
@@ -210,14 +192,21 @@ export default class UserApi extends BaseApi {
|
|||||||
msg: "令牌無效",
|
msg: "令牌無效",
|
||||||
}
|
}
|
||||||
|
|
||||||
const user = User.findById(token.author)
|
const user = User.findById(token.author) as User
|
||||||
|
const contacts = user.getContactsList()
|
||||||
|
contacts.push(ChatPrivate.getChatIdByUsersId(token.author, token.author))
|
||||||
|
|
||||||
return {
|
return {
|
||||||
msg: "成功",
|
msg: "成功",
|
||||||
code: 200,
|
code: 200,
|
||||||
data: {
|
data: {
|
||||||
contacts: user!.getContactsList().map((id) => {
|
contacts_list: contacts.map((id) => {
|
||||||
title: Chat.findById(id)?.bean.title
|
const chat = Chat.findById(id)
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
title: chat?.getTitle(user) || "未知",
|
||||||
|
avatar: chat?.getAvatarFileHash(user) ? "uploaded_files/" + chat?.getAvatarFileHash(user) : undefined
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -248,6 +237,6 @@ export default class UserApi extends BaseApi {
|
|||||||
* 公開資料
|
* 公開資料
|
||||||
* ================================================
|
* ================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -25,7 +25,7 @@ export default class Chat {
|
|||||||
/* Chat ID */ id TEXT NOT NULL,
|
/* Chat ID */ id TEXT NOT NULL,
|
||||||
/* 標題 (群組) */ title TEXT,
|
/* 標題 (群組) */ title TEXT,
|
||||||
/* 頭像 (群組) */ avatar BLOB,
|
/* 頭像 (群組) */ avatar BLOB,
|
||||||
/* UserIdA (私信) */ user_a_id TEXT
|
/* UserIdA (私信) */ user_a_id TEXT,
|
||||||
/* UserIdB (私信) */ user_b_id TEXT,
|
/* UserIdB (私信) */ user_b_id TEXT,
|
||||||
/* 设置 */ settings TEXT NOT NULL
|
/* 设置 */ settings TEXT NOT NULL
|
||||||
);
|
);
|
||||||
@@ -57,8 +57,8 @@ export default class Chat {
|
|||||||
avatar,
|
avatar,
|
||||||
user_a_id,
|
user_a_id,
|
||||||
user_b_id,
|
user_b_id,
|
||||||
settings,
|
settings
|
||||||
) VALUES (?, ?);`).run(
|
) VALUES (?, ?, ?, ?, ?, ?, ?);`).run(
|
||||||
type,
|
type,
|
||||||
chatId,
|
chatId,
|
||||||
null,
|
null,
|
||||||
@@ -76,17 +76,26 @@ export default class Chat {
|
|||||||
constructor(bean: ChatBean) {
|
constructor(bean: ChatBean) {
|
||||||
this.bean = bean
|
this.bean = bean
|
||||||
}
|
}
|
||||||
private setAttr(key: string, value: SQLInputValue): void {
|
setAttr(key: string, value: SQLInputValue): void {
|
||||||
Chat.database.prepare(`UPDATE ${Chat.table_name} SET ${key} = ? WHERE id = ?`).run(value, this.bean.id)
|
Chat.database.prepare(`UPDATE ${Chat.table_name} SET ${key} = ? WHERE id = ?`).run(value, this.bean.id)
|
||||||
this.bean[key] = value
|
this.bean[key] = value
|
||||||
}
|
}
|
||||||
|
|
||||||
getTitleForPrivate(userMySelf: User) {
|
getAnotherUserForPrivate(userMySelf: User) {
|
||||||
|
// 注意: 這裏已經確定了 Chat, 不需要再指定對方用戶
|
||||||
if (this.bean.user_a_id == userMySelf.bean.id)
|
if (this.bean.user_a_id == userMySelf.bean.id)
|
||||||
return User.findById(this.bean?.user_b_id as string)?.getNickName() || "未知對話"
|
return User.findById(this.bean?.user_b_id as string)
|
||||||
if (this.bean.user_b_id == userMySelf.bean.id)
|
if (this.bean.user_b_id == userMySelf.bean.id)
|
||||||
return userMySelf.getNickName()
|
return userMySelf
|
||||||
|
|
||||||
return "未知對話"
|
return null
|
||||||
|
}
|
||||||
|
getTitle(userMySelf?: User) {
|
||||||
|
if (this.bean.type == 'group') return this.bean.title
|
||||||
|
if (this.bean.type == 'private') return this.getAnotherUserForPrivate(userMySelf as User)?.getNickName()
|
||||||
|
}
|
||||||
|
getAvatarFileHash(userMySelf?: User) {
|
||||||
|
if (this.bean.type == 'group') return this.bean.avatar_file_hash
|
||||||
|
if (this.bean.type == 'private') return this.getAnotherUserForPrivate(userMySelf as User)?.getAvatarFileHash()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,16 +12,20 @@ export default class ChatPrivate extends Chat {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static createForPrivate(userA: User, userB: User) {
|
static createForPrivate(userA: User, userB: User) {
|
||||||
return this.create(this.getChatIdByUsersId(userA.bean.id, userB.bean.id), 'private')
|
const chat = this.create(this.getChatIdByUsersId(userA.bean.id, userB.bean.id), 'private')
|
||||||
|
chat.setAttr('user_a_id', userA.bean.id)
|
||||||
|
chat.setAttr('user_b_id', userB.bean.id)
|
||||||
}
|
}
|
||||||
static findForPrivate(userA: User, userB: User) {
|
static findByUsersForPrivate(userA: User, userB: User) {
|
||||||
return this.fromChat(this.findById(this.getChatIdByUsersId(userA.bean.id, userB.bean.id)) as Chat)
|
const chat = this.findById(this.getChatIdByUsersId(userA.bean.id, userB.bean.id))
|
||||||
|
if (chat)
|
||||||
|
return this.fromChat(chat as Chat)
|
||||||
}
|
}
|
||||||
static findOrCreateForPrivate(userA: User, userB: User) {
|
static findOrCreateForPrivate(userA: User, userB: User) {
|
||||||
let a = this.findForPrivate(userA, userB)
|
let a = this.findByUsersForPrivate(userA, userB)
|
||||||
if (a == null) {
|
if (a == null) {
|
||||||
this.createForPrivate(userA, userB)
|
this.createForPrivate(userA, userB)
|
||||||
a = this.findForPrivate(userA, userB) as ChatPrivate
|
a = this.findByUsersForPrivate(userA, userB) as ChatPrivate
|
||||||
}
|
}
|
||||||
return a
|
return a
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ export default class User {
|
|||||||
/* 用戶名, 可選 */ username TEXT,
|
/* 用戶名, 可選 */ username TEXT,
|
||||||
/* 昵称 */ nickname TEXT NOT NULL,
|
/* 昵称 */ nickname TEXT NOT NULL,
|
||||||
/* 头像, 可选 */ avatar_file_hash TEXT,
|
/* 头像, 可选 */ avatar_file_hash TEXT,
|
||||||
/* 聯絡人組 */ contact_groups TEXT NOT NULL,
|
/* 聯絡人組 */ contacts_list TEXT NOT NULL,
|
||||||
/* 设置 */ settings TEXT NOT NULL
|
/* 设置 */ settings TEXT NOT NULL
|
||||||
);
|
);
|
||||||
`)
|
`)
|
||||||
@@ -80,7 +80,7 @@ export default class User {
|
|||||||
)[0]
|
)[0]
|
||||||
)
|
)
|
||||||
avatar && user.setAvatar(avatar)
|
avatar && user.setAvatar(avatar)
|
||||||
user.addContact(ChatPrivate.getChatIdByUsersId(user.bean.id, user.bean.id))
|
ChatPrivate.findOrCreateForPrivate(user, user)
|
||||||
return user
|
return user
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -124,14 +124,16 @@ export default class User {
|
|||||||
ls.push(chatId)
|
ls.push(chatId)
|
||||||
this.setAttr("contacts_list", JSON.stringify(ls))
|
this.setAttr("contacts_list", JSON.stringify(ls))
|
||||||
}
|
}
|
||||||
|
removeContacts(contacts: string[]) {
|
||||||
|
const ls = this.getContactsList().filter((v) => !contacts.includes(v))
|
||||||
|
this.setAttr("contacts_list", JSON.stringify(ls))
|
||||||
|
}
|
||||||
getContactsList() {
|
getContactsList() {
|
||||||
try {
|
try {
|
||||||
return JSON.parse(this.bean.contacts_list) as string[]
|
return JSON.parse(this.bean.contacts_list) as string[]
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(chalk.yellow(`警告: 聯絡人組解析失敗: ${(e as Error).message}`))
|
console.log(chalk.yellow(`警告: 聯絡人組解析失敗: ${(e as Error).message}`))
|
||||||
return [
|
return []
|
||||||
this.bean.id
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
getNickName(): string {
|
getNickName(): string {
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ import path from "node:path"
|
|||||||
|
|
||||||
const app = express()
|
const app = express()
|
||||||
app.use('/', express.static(config.data_path + '/page_compiled'))
|
app.use('/', express.static(config.data_path + '/page_compiled'))
|
||||||
app.use('/uploaded_files/:hash', (req, res) => {
|
app.get('/uploaded_files/:hash', (req, res) => {
|
||||||
const hash = req.params.hash as string
|
const hash = req.params.hash as string
|
||||||
if (hash == null) {
|
if (hash == null) {
|
||||||
res.sendStatus(404)
|
res.sendStatus(404)
|
||||||
@@ -39,7 +39,7 @@ const httpServer: HttpServerLike = (
|
|||||||
http.createServer(app)
|
http.createServer(app)
|
||||||
)
|
)
|
||||||
const io = new SocketIo.Server(httpServer, {
|
const io = new SocketIo.Server(httpServer, {
|
||||||
|
maxHttpBufferSize: 1e9,
|
||||||
})
|
})
|
||||||
|
|
||||||
ApiManager.initServer(httpServer, io)
|
ApiManager.initServer(httpServer, io)
|
||||||
|
|||||||
Reference in New Issue
Block a user