Compare commits

...

7 Commits

Author SHA1 Message Date
CrescentLeaf
f13623f4fc 列表不会带动搜索框转 2025-11-23 12:34:18 +08:00
CrescentLeaf
2cf9a20910 snackbar 略改 2025-11-23 12:33:26 +08:00
CrescentLeaf
59191cc42e feat: 查看自己所有的对话 2025-11-23 12:32:59 +08:00
CrescentLeaf
98132eb67c fix: stupid TIMEOUT & INTERVAL mix up 2025-11-23 12:19:32 +08:00
CrescentLeaf
204748699e 对话框默认可以外部点击关闭 2025-11-23 12:05:39 +08:00
CrescentLeaf
7d90d4b0f0 修改了消息原始数据的显示方式 2025-11-23 12:02:59 +08:00
CrescentLeaf
744f02677d Tab 栏样式修改之移除 ::after 2025-11-23 11:15:08 +08:00
18 changed files with 354 additions and 104 deletions

View File

@@ -22,6 +22,9 @@ export type CallMethod =
// 最近对话列表
"User.getMyRecentChats" |
// 所有对话列表
"User.getMyAllChats" |
// 对话信息
"Chat.getInfo" |
"Chat.getAnotherUserIdFromPrivate" |

View File

@@ -177,4 +177,24 @@ export default class UserMySelf extends User {
return re.data!.recent_chats as RecentChatBean[]
throw new CallbackError(re)
}
/*
* ================================================
* 所有对话
* ================================================
*/
async getMyAllChatBeans() {
try {
return await this.getMyAllChatBeansOrThrow()
} catch (_) {
return []
}
}
async getMyAllChatBeansOrThrow() {
const re = await this.client.invoke("User.getMyAllChats", {
token: this.client.access_token
})
if (re.code == 200)
return re.data!.all_chats as ChatBean[]
throw new CallbackError(re)
}
}

View File

@@ -22,6 +22,9 @@ export type CallMethod =
// 最近对话列表
"User.getMyRecentChats" |
// 所有对话列表
"User.getMyAllChats" |
// 对话信息
"Chat.getInfo" |
"Chat.getAnotherUserIdFromPrivate" |

View File

@@ -34,7 +34,6 @@
"socket.io-client": "npm:socket.io-client@4.8.1",
"marked": "npm:marked@16.3.0",
"dompurify": "npm:dompurify@3.2.7",
"pinch-zoom-element": "npm:pinch-zoom-element@1.1.1",
"react-json-view": "npm:react-json-view@1.21.3"
"pinch-zoom-element": "npm:pinch-zoom-element@1.1.1"
}
}

View File

@@ -25,6 +25,7 @@ import DataCaches from "../api/DataCaches.ts"
import getUrlForFileByHash from "../getUrlForFileByHash.ts"
import Message from "../api/client_data/Message.ts"
import EventBus from "../EventBus.ts"
import AllChatsList from "./main/AllChatsList.tsx";
declare global {
namespace React {
@@ -205,8 +206,21 @@ export default function App() {
</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="chat--outlined" active-icon="chat--filled" value="Contacts"></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-button-icon icon="refresh" slot="bottom" onClick={() => {
EventBus.emit('RecentsList.updateRecents')
EventBus.emit('ContactsList.updateContacts')
EventBus.emit('AllChatsList.updateAllChats')
}}></mdui-button-icon>
<mdui-dropdown trigger="hover" slot="bottom">
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
<mdui-menu>
<mdui-menu-item icon="person_add" onClick={() => addContactDialogRef.current!.open = true}></mdui-menu-item>
<mdui-menu-item icon="group_add" onClick={() => createGroupDialogRef.current!.open = true}></mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
<mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
</mdui-navigation-rail>
{
@@ -220,9 +234,17 @@ export default function App() {
display={navigationItemSelected == "Recents"}
currentChatId={currentChatId} />
}
{
// 最近聊天
<AllChatsList
openChatInfoDialog={openChatInfoDialog}
display={navigationItemSelected == "AllChats"}
currentChatId={currentChatId} />
}
{
// 對話列表
<ContactsList
currentChatId={currentChatId}
openChatInfoDialog={openChatInfoDialog}
setSharedFavouriteChats={setSharedFavouriteChats}
addContactDialogRef={addContactDialogRef as any}

View File

@@ -21,6 +21,8 @@ import Chat from "../api/client_data/Chat.ts"
import AddContactDialog from './dialog/AddContactDialog.tsx'
import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
import getUrlForFileByHash from "../getUrlForFileByHash.ts"
import AllChatsList from "./main/AllChatsList.tsx";
import EventBus from "../EventBus.ts";
declare global {
namespace React {
@@ -198,12 +200,24 @@ export default function AppMobile() {
<mdui-top-app-bar-title>{
({
Recents: "最近对话",
Contacts: "所有对话"
Contacts: "收藏对话"
})[navigationItemSelected]
}</mdui-top-app-bar-title>
<div style={{
flexGrow: 1,
}}></div>
<mdui-button-icon icon="refresh" onClick={() => {
EventBus.emit('RecentsList.updateRecents')
EventBus.emit('ContactsList.updateContacts')
EventBus.emit('AllChatsList.updateAllChats')
}}></mdui-button-icon>
<mdui-dropdown trigger="hover">
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
<mdui-menu>
<mdui-menu-item icon="person_add" onClick={() => addContactDialogRef.current!.open = true}></mdui-menu-item>
<mdui-menu-item icon="group_add" onClick={() => createGroupDialogRef.current!.open = true}></mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
<mdui-button-icon icon="settings"></mdui-button-icon>
<mdui-button-icon>
<Avatar src={getUrlForFileByHash(myUserProfileCache?.avatar_file_hash)} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
@@ -227,9 +241,17 @@ export default function AppMobile() {
display={navigationItemSelected == "Recents"}
currentChatId={currentChatId} />
}
{
// 最近聊天
<AllChatsList
openChatInfoDialog={openChatInfoDialog}
display={navigationItemSelected == "AllChats"}
currentChatId={currentChatId} />
}
{
// 對話列表
<ContactsList
currentChatId={currentChatId}
openChatInfoDialog={openChatInfoDialog}
setSharedFavouriteChats={setSharedFavouriteChats}
addContactDialogRef={addContactDialogRef as any}
@@ -242,7 +264,8 @@ export default function AppMobile() {
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="chat--outlined" active-icon="chat--filled" value="Contacts"></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>
)

View File

@@ -110,6 +110,12 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
tabRef.current != null && setTabItemSelected(tabRef.current!.value as string)
})
const containerTabRef = React.useRef<Tab>(null)
React.useEffect(() => {
$(containerTabRef.current!.shadowRoot).append(`<style>.container::after { height: 0 !important; }</style>`)
$(tabRef.current!.shadowRoot).append(`<style>.container::after { height: 0 !important; }</style>`)
}, [target])
async function getChatInfoAndInit() {
setMessagesList([])
page.current = 0
@@ -193,15 +199,17 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
const cachedFiles = React.useRef({} as { [fileName: string]: ArrayBuffer })
const cachedFileNamesCount = React.useRef({} as { [fileName: string]: number })
async function sendMessage() {
let text = inputRef.current!.value
if (text.trim() == '') return
const sendingFilesSnackbar = snackbar({
message: `上传文件到 [${chatInfo.title}]...`,
message: `发送消息到 [${chatInfo.title}]...`,
placement: 'top',
autoCloseDelay: 0,
})
let i = 1
let i2 = 0
const sendingFilesSnackbarId = setInterval(() => {
const len = Object.keys(cachedFiles.current).length
const len = Object.keys(cachedFiles.current).filter((fileName) => text.indexOf(fileName)).length
sendingFilesSnackbar.textContent = i2 == len ? `发送消息到 [${chatInfo.title}]... (${i}s)` : `上传第 ${i2}/${len} 文件到 [${chatInfo.title}]... (${i}s)`
i++
}, 1000)
@@ -210,8 +218,6 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
sendingFilesSnackbar.open = false
}
try {
let text = inputRef.current!.value
if (text.trim() == '') return
setIsMessageSending(true)
for (const fileName of Object.keys(cachedFiles.current)) {
if (text.indexOf(fileName) != -1) {
@@ -323,7 +329,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
flexDirection: 'column',
overflowY: 'auto',
}} {...props}>
<mdui-tabs style={{
<mdui-tabs ref={containerTabRef} style={{
position: 'sticky',
display: "flex",
flexDirection: "column",

View File

@@ -40,9 +40,9 @@ export default function GroupMembersList({
}
updateMembers()
EventBus.on('GroupMembersList.updateMembers', () => updateMembers())
const id = setTimeout(() => updateMembers(), 15 * 1000)
const id = setInterval(() => updateMembers(), 15 * 1000)
return () => {
clearTimeout(id)
clearInterval(id)
EventBus.off('GroupMembersList.updateMembers')
}
}, [target])

View File

@@ -39,9 +39,9 @@ export default function GroupMembersList({
}
updateJoinRequests()
EventBus.on('JoinRequestsList.updateJoinRequests', () => updateJoinRequests())
const id = setTimeout(() => updateJoinRequests(), 15 * 1000)
const id = setInterval(() => updateJoinRequests(), 15 * 1000)
return () => {
clearTimeout(id)
clearInterval(id)
EventBus.off('JoinRequestsList.updateJoinRequests')
}
}, [target])

View File

@@ -9,7 +9,6 @@ import useAsyncEffect from "../useAsyncEffect.ts"
import useEventListener from "../useEventListener.ts"
import React from "react"
import isMobileUI from "../isMobileUI.ts"
import ReactJson from 'react-json-view'
import User from "../../api/client_data/User.ts"
import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
import escapeHTML from "../../escapeHtml.ts"
@@ -86,11 +85,7 @@ export default function Message({ userId, rawData, renderHTML, message, openUser
}, [userId])
const dropDownRef = React.useRef<Dropdown>(null)
const messageJsonDialogRef = React.useRef<Dialog>(null)
useEventListener(messageJsonDialogRef, 'click', (e) => {
e.stopPropagation()
})
useEventListener(dropDownRef, 'closed', (e) => {
useEventListener(dropDownRef, 'closed', () => {
setDropDownOpen(false)
})
@@ -180,12 +175,6 @@ export default function Message({ userId, rawData, renderHTML, message, openUser
// paddingTop: isUsingFullDisplay ? undefined : "14px",
// backgroundColor: isUsingFullDisplay ? "inherit" : undefined
}}>
<mdui-dialog close-on-overlay-click close-on-esc ref={messageJsonDialogRef}>
{
// @ts-ignore 这是可以正常工作的
<ReactJson src={message} />
}
</mdui-dialog>
<mdui-dropdown trigger="manual" ref={dropDownRef} open={isDropDownOpen}>
<span
slot="trigger"
@@ -204,7 +193,23 @@ export default function Message({ userId, rawData, renderHTML, message, openUser
}}>
<mdui-menu-item icon="content_copy" onClick={() => copyToClipboard($(dropDownRef.current as HTMLElement).find('#msg').text().trim())}></mdui-menu-item>
<mdui-menu-item icon="content_copy" onClick={() => copyToClipboard(rawData)}></mdui-menu-item>
<mdui-menu-item icon="info" onClick={() => messageJsonDialogRef.current!.open = true}>JSON</mdui-menu-item>
<mdui-menu-item icon="info" onClick={() => dialog({
headline: "原始数据",
body: `<span style="word-break: break-word;">${Object.keys(message)
// @ts-ignore 懒
.map((k) => `${k} = ${message[k]}`)
.join('<br><br>')}<span>`,
closeOnEsc: true,
closeOnOverlayClick: true,
actions: [
{
text: "关闭",
onClick: () => {
return true
},
}
]
}).addEventListener('click', (e) => e.stopPropagation())}></mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
</mdui-card>

View File

@@ -106,6 +106,8 @@ export default function MyProfileDialog({
},
}
],
closeOnEsc: true,
closeOnOverlayClick: true,
})}>退</mdui-list-item>
</mdui-list>
</mdui-dialog>

View File

@@ -0,0 +1,85 @@
import { TextField } from "mdui"
import useEventListener from "../useEventListener.ts"
import RecentsListItem from "./RecentsListItem.tsx"
import React from "react"
import useAsyncEffect from "../useAsyncEffect.ts"
import Client from "../../api/Client.ts"
import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
import data from "../../Data.ts"
import EventBus from "../../EventBus.ts"
import isMobileUI from "../isMobileUI.ts"
import Chat from "../../api/client_data/Chat.ts"
import AllChatsListItem from "./AllChatsListItem.tsx"
interface Args extends React.HTMLAttributes<HTMLElement> {
display: boolean
currentChatId: string
openChatInfoDialog: (chat: Chat) => void
}
export default function AllChatsList({
currentChatId,
display,
openChatInfoDialog,
...props
}: Args) {
const searchRef = React.useRef<HTMLElement>(null)
const [searchText, setSearchText] = React.useState('')
const [allChatsList, setAllChatsList] = React.useState<Chat[]>([])
useEventListener(searchRef, 'input', (e) => {
setSearchText((e.target as unknown as TextField).value)
})
useAsyncEffect(async () => {
async function updateAllChats() {
const re = await Client.invoke("User.getMyAllChats", {
token: data.access_token,
})
if (re.code != 200) {
if (re.code != 401 && re.code != 400) checkApiSuccessOrSncakbar(re, "获取所有对话列表失败")
return
}
setAllChatsList(re.data!.all_chats as Chat[])
}
updateAllChats()
EventBus.on('AllChatsList.updateAllChats', () => updateAllChats())
return () => {
EventBus.off('AllChatsList.updateAllChats')
}
})
return <mdui-list style={{
overflowY: 'auto',
paddingRight: '10px',
paddingLeft: '10px',
display: display ? undefined : 'none',
height: '100%',
width: '100%',
}} {...props}>
<mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
marginTop: '5px',
marginBottom: '13px',
position: 'sticky',
top: '0',
backgroundColor: 'rgb(var(--mdui-color-background))',
zIndex: '10',
}}></mdui-text-field>
{
allChatsList.filter((chat) =>
searchText == '' ||
chat.title.includes(searchText) ||
chat.id.includes(searchText)
).map((v) =>
<AllChatsListItem
active={isMobileUI() ? false : currentChatId == v.id}
key={v.id}
onClick={() => {
openChatInfoDialog(v)
}}
chat={v} />
)
}
</mdui-list>
}

View File

@@ -0,0 +1,29 @@
import { $ } from "mdui/jq"
import Avatar from "../Avatar.tsx"
import React from 'react'
import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
import Chat from "../../api/client_data/Chat.ts"
interface Args extends React.HTMLAttributes<HTMLElement> {
chat: Chat
active?: boolean
}
export default function AllChatsListItem({ chat, active, ...prop }: Args) {
const { title, avatar_file_hash } = chat
const ref = React.useRef<HTMLElement>(null)
return (
<mdui-list-item active={active} ref={ref} rounded style={{
marginTop: '3px',
marginBottom: '3px',
width: '100%',
}} {...prop as any}>
<span style={{
width: "100%",
}}>{title}</span>
<Avatar src={getUrlForFileByHash(avatar_file_hash as string)} text={title} slot="icon" />
</mdui-list-item>
)
}

View File

@@ -7,6 +7,7 @@ import data from "../../Data.ts"
import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
import Chat from "../../api/client_data/Chat.ts"
import EventBus from "../../EventBus.ts"
import isMobileUI from "../isMobileUI.ts";
interface Args extends React.HTMLAttributes<HTMLElement> {
display: boolean
@@ -14,6 +15,7 @@ interface Args extends React.HTMLAttributes<HTMLElement> {
addContactDialogRef: React.MutableRefObject<Dialog>
createGroupDialogRef: React.MutableRefObject<Dialog>
setSharedFavouriteChats: React.Dispatch<React.SetStateAction<Chat[]>>
currentChatId: string
}
export default function ContactsList({
@@ -22,6 +24,7 @@ export default function ContactsList({
addContactDialogRef,
createGroupDialogRef,
setSharedFavouriteChats,
currentChatId,
...props
}: Args) {
const searchRef = React.useRef<HTMLElement>(null)
@@ -63,20 +66,21 @@ export default function ContactsList({
height: '100%',
width: '100%',
}} {...props}>
<div style={{
position: 'sticky',
top: '0',
backgroundColor: 'rgb(var(--mdui-color-background))',
zIndex: '10',
}}>
<mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
marginTop: '5px',
}}></mdui-text-field>
<mdui-list-item rounded style={{
width: '100%',
marginTop: '13px',
}} icon="person_add" onClick={() => addContactDialogRef.current!.open = true}></mdui-list-item>
width: '100%',
}} icon="person_add" onClick={() => addContactDialogRef.current!.open = true}></mdui-list-item>
<mdui-list-item rounded style={{
width: '100%',
}} icon="group_add" onClick={() => createGroupDialogRef.current!.open = true}></mdui-list-item>
<mdui-list-item rounded style={{
width: '100%',
marginTop: '13px',
}} icon="refresh" onClick={() => EventBus.emit('ContactsList.updateContacts')}></mdui-list-item>
<mdui-list-item rounded style={{
width: '100%',
@@ -92,6 +96,8 @@ export default function ContactsList({
}} icon="delete" onClick={() => dialog({
headline: "删除所选",
description: "确定要删除所选的收藏对话吗? 这并不会删除您的聊天记录, 也不会丢失对话成员身份",
closeOnEsc: true,
closeOnOverlayClick: true,
actions: [
{
text: "取消",
@@ -137,6 +143,7 @@ export default function ContactsList({
<div style={{
height: "15px",
}}></div>
</div>
{
contactsList.filter((chat) =>
@@ -145,7 +152,7 @@ export default function ContactsList({
chat.id.includes(searchText)
).map((v) =>
<ContactsListItem
active={checkedList[v.id] == true}
active={isMultiSelecting ? checkedList[v.id] == true : (isMobileUI() ? false : currentChatId == v.id)}
onClick={() => {
if (isMultiSelecting)
setCheckedList({

View File

@@ -44,7 +44,11 @@ export default function RecentsList({
}
updateRecents()
EventBus.on('RecentsList.updateRecents', () => updateRecents())
setTimeout(() => updateRecents(), 15 * 1000)
const id = setInterval(() => updateRecents(), 15 * 1000)
return () => {
EventBus.off('RecentsList.updateRecents')
clearInterval(id)
}
})
return <mdui-list style={{
@@ -58,6 +62,10 @@ export default function RecentsList({
<mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
marginTop: '5px',
marginBottom: '13px',
position: 'sticky',
top: '0',
backgroundColor: 'rgb(var(--mdui-color-background))',
zIndex: '10',
}}></mdui-text-field>
{
recentsList.filter((chat) =>

View File

@@ -27,6 +27,8 @@ export default function TextFieldPreference({ title, icon, description, id, stat
label: description,
value: state,
},
closeOnEsc: true,
closeOnOverlayClick: true,
})
}}>
{title}

View File

@@ -267,6 +267,38 @@ export default class UserApi extends BaseApi {
}
}
})
// 獲取聯絡人列表
this.registerEvent("User.getMyAllChats", (args, { deviceId }) => {
if (this.checkArgsMissing(args, ['token'])) return {
msg: "参数缺失",
code: 400,
}
const token = TokenManager.decode(args.token as string)
if (!this.checkToken(token, deviceId)) return {
code: 401,
msg: "令牌无效",
}
const user = User.findById(token.author) as User
const list = user.getAllChatsList()
return {
msg: "成功",
code: 200,
data: {
all_chats: list.map((id) => {
const chat = Chat.findById(id)
return {
id,
type: chat?.bean.type,
title: chat?.getTitle(user) || "未知",
avatar_file_hash: chat?.getAvatarFileHash(user) ? chat?.getAvatarFileHash(user) : undefined
}
})
}
}
})
// 獲取最近对话列表
this.registerEvent("User.getMyRecentChats", (args, { deviceId }) => {
if (this.checkArgsMissing(args, ['token'])) return {

View File

@@ -15,6 +15,7 @@ import Chat from "./Chat.ts"
import ChatBean from "./ChatBean.ts"
import MapJson from "../MapJson.ts"
import DataWrongError from '../api/DataWrongError.ts'
import UserChatLinker from "./UserChatLinker.ts";
type UserBeanKey = keyof UserBean
@@ -155,6 +156,9 @@ export default class User {
return []
}
}
getAllChatsList() {
return UserChatLinker.getUserChats(this.bean.id)
}
getNickName(): string {
return this.bean.nickname
}