资料卡展示对话或用户 id

移除 UserProfileDialog 并入 ChatInfoDialog
修复由于没有语法检查导致的一系列符号丢失问题, 支持打开群成员的资料卡
2025-11-23 00:42:12 +08:00 · 2025-11-23 00:14:52 +08:00 · 2025-11-22 23:51:36 +08:00 · 2025-11-22 23:35:21 +08:00
9 changed files with 120 additions and 176 deletions
--- a/client/ui/App.tsx
+++ b/client/ui/App.tsx
@@ -3,7 +3,6 @@ import data from "../Data.ts"
 import ChatFragment from "./chat/ChatFragment.tsx"
 import useEventListener from './useEventListener.ts'
 import User from "../api/client_data/User.ts"
-import RecentChat from "../api/client_data/RecentChat.ts"
 import Avatar from "./Avatar.tsx"

 import * as React from 'react'
@@ -22,7 +21,6 @@ import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
 import Chat from "../api/client_data/Chat.ts"
 import AddContactDialog from './dialog/AddContactDialog.tsx'
 import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
-import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import DataCaches from "../api/DataCaches.ts"
 import getUrlForFileByHash from "../getUrlForFileByHash.ts"
 import Message from "../api/client_data/Message.ts"
@@ -62,9 +60,6 @@ export default function App() {
        myProfileDialogRef.current!.open = true
    })

-    const userProfileDialogRef = React.useRef<Dialog>(null)
-    const [userInfo, setUserInfo] = React.useState(null as unknown as User)
-
    const addContactDialogRef = React.useRef<Dialog>(null)
    const createGroupDialogRef = React.useRef<Dialog>(null)

@@ -112,13 +107,23 @@ export default function App() {
    }

    async function openUserInfoDialog(user: User | string) {
-        if (typeof user == 'object') {
+        const re = await Client.invoke("Chat.getIdForPrivate", {
+            token: data.access_token,
+            target: typeof user == 'object' ? user.id : user,
+        })
+        if (re.code != 200) {
+            checkApiSuccessOrSncakbar(re, '获取对话失败')
+            return
+        }
+
+        openChatInfoDialog(re.data as Chat)
+        /* if (typeof user == 'object') {
            setUserInfo(user)
        } else {
            setUserInfo(await DataCaches.getUserProfile(user))

        }
-        userProfileDialogRef.current!.open = true
+        userProfileDialogRef.current!.open = true */
    }
    // deno-lint-ignore no-window
    window.openUserInfoDialog = openUserInfoDialog
@@ -181,18 +186,12 @@ export default function App() {
            <ChatInfoDialog
                chatInfoDialogRef={chatInfoDialogRef as any}
                openChatFragment={openChatFragment}
-                openUserInfoDialog={openUserInfoDialog}
                sharedFavouriteChats={sharedFavouriteChats}
                chat={chatInfo} />

            <MyProfileDialog
                myProfileDialogRef={myProfileDialogRef as any}
                user={myUserProfileCache} />
-            <UserProfileDialog
-                chatInfoDialogRef={chatInfoDialogRef as any}
-                userProfileDialogRef={userProfileDialogRef as any}
-                openChatFragment={openChatFragment}
-                user={userInfo} />

            <AddContactDialog
                addContactDialogRef={addContactDialogRef} />
--- a/client/ui/AppMobile.tsx
+++ b/client/ui/AppMobile.tsx
@@ -3,7 +3,6 @@ import data from "../Data.ts"
 import ChatFragment from "./chat/ChatFragment.tsx"
 import useEventListener from './useEventListener.ts'
 import User from "../api/client_data/User.ts"
-import RecentChat from "../api/client_data/RecentChat.ts"
 import Avatar from "./Avatar.tsx"

 import * as React from 'react'
@@ -21,8 +20,6 @@ import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
 import Chat from "../api/client_data/Chat.ts"
 import AddContactDialog from './dialog/AddContactDialog.tsx'
 import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
-import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
-import DataCaches from "../api/DataCaches.ts"
 import getUrlForFileByHash from "../getUrlForFileByHash.ts"

 declare global {
@@ -65,9 +62,6 @@ export default function AppMobile() {
    const chatInfoDialogRef = React.useRef<Dialog>(null)
    const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)

-    const userProfileDialogRef = React.useRef<Dialog>(null)
-    const [userInfo, setUserInfo] = React.useState(null as unknown as User)
-
    const [myUserProfileCache, setMyUserProfileCache] = React.useState(null as unknown as User)

    const [isShowChatFragment, setIsShowChatFragment] = React.useState(false)
@@ -112,13 +106,23 @@ export default function AppMobile() {
    }

    async function openUserInfoDialog(user: User | string) {
-        if (typeof user == 'object') {
+        const re = await Client.invoke("Chat.getIdForPrivate", {
+            token: data.access_token,
+            target: typeof user == 'object' ? user.id : user,
+        })
+        if (re.code != 200) {
+            checkApiSuccessOrSncakbar(re, '获取对话失败')
+            return
+        }
+
+        openChatInfoDialog(re.data as Chat)
+        /* if (typeof user == 'object') {
            setUserInfo(user)
        } else {
            setUserInfo(await DataCaches.getUserProfile(user))

        }
-        userProfileDialogRef.current!.open = true
+        userProfileDialogRef.current!.open = true */
    }
    // deno-lint-ignore no-window
    window.openUserInfoDialog = openUserInfoDialog
@@ -167,7 +171,6 @@ export default function AppMobile() {

            <ChatInfoDialog
                chatInfoDialogRef={chatInfoDialogRef as any}
-                openUserInfoDialog={openUserInfoDialog}
                sharedFavouriteChats={sharedFavouriteChats}
                openChatFragment={(id) => {
                    setCurrentChatId(id)
@@ -178,11 +181,6 @@ export default function AppMobile() {
            <MyProfileDialog
                myProfileDialogRef={myProfileDialogRef as any}
                user={myUserProfileCache} />
-            <UserProfileDialog
-                chatInfoDialogRef={chatInfoDialogRef as any}
-                userProfileDialogRef={userProfileDialogRef as any}
-                openChatFragment={openChatFragment}
-                user={userInfo} />

            <AddContactDialog
                addContactDialogRef={addContactDialogRef} />
--- a/client/ui/chat/ChatFragment.tsx
+++ b/client/ui/chat/ChatFragment.tsx
@@ -576,7 +576,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                        flexDirection: "column",
                        height: "100%",
                    }}>
-                        <JoinRequestsList chat={chatInfo} />
+                        {chatInfo.is_admin && <JoinRequestsList chat={chatInfo} />}
                    </mdui-tab-panel>
                }
                <mdui-tab-panel slot="panel" value="Settings" style={{
--- a/client/ui/chat/GroupMembersList.tsx
+++ b/client/ui/chat/GroupMembersList.tsx
@@ -73,6 +73,7 @@ export default function GroupMembersList({
            ).map((v) =>
                <GroupMembersListItem
                    key={v.id}
+                    chat={chat}
                    user={v} />
            )
        }
--- a/client/ui/chat/GroupMembersListItem.tsx
+++ b/client/ui/chat/GroupMembersListItem.tsx
@@ -3,12 +3,18 @@ import Avatar from "../Avatar.tsx"
 import React from 'react'
 import User from "../../api/client_data/User.ts"
 import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
+import Client from "../../api/Client.ts"
+import data from "../../Data.ts"
+import Chat from "../../api/client_data/Chat.ts"
+import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
+import EventBus from "../../EventBus.ts"

 interface Args extends React.HTMLAttributes<HTMLElement> {
    user: User
+    chat: Chat
 }

-export default function GroupMembersListItem({ user }: Args) {
+export default function GroupMembersListItem({ user, chat }: Args) {
    const { id, nickname, avatar_file_hash } = user

    const itemRef = React.useRef<HTMLElement>(null)
@@ -16,54 +22,60 @@ export default function GroupMembersListItem({ user }: Args) {
        <mdui-list-item rounded style={{
            marginTop: '3px',
            marginBottom: '3px',
-        }} ref={itemRef}>
+        }} ref={itemRef} onClick={() => {
+            // deno-lint-ignore no-window
+            window.openUserInfoDialog(user)
+        }}>
            {nickname}
            <Avatar src={getUrlForFileByHash(avatar_file_hash)} text={nickname} slot="icon" />
            <div slot="end-icon">
-                <mdui-button-icon icon="delete" onClick={() => dialog({
-                    headline: "移除群组成员",
-                    description: `确定要移除 ${nickname} 吗?`,
-                    actions: [
-                        {
-                            text: "取消",
-                            onClick: () => {
-                                return true
+                <mdui-button-icon icon="delete" onClick={(e) => {
+                    e.stopPropagation()
+                    dialog({
+                        headline: "移除群组成员",
+                        description: `确定要移除 ${nickname} 吗?`,
+                        actions: [
+                            {
+                                text: "取消",
+                                onClick: () => {
+                                    return true
+                                },
                            },
-                        },
-                        {
-                            text: "确定",
-                            onClick: () => {
-                                ;(async () => {
-                                    const re = await Client.invoke("Chat.removeMembers", {
-                                        token: data.access_token,
-                                        chat_id: target,
-                                        user_ids: [
-                                            id
-                                        ],
-                                    })
-                                    if (re.code != 200)
-                                        checkApiSuccessOrSncakbar(re, "移除群组成员失败")
-                                    EventBus.emit('GroupMembersList.updateMembers')
-                                    snackbar({
-                                        message: `已移除 ${nickname}`,
-                                        placement: "top",
-                                        action: "撤销操作",
-                                        onActionClick: async () => {
-                                            const re = await Client.invoke("User.addContacts", {
-                                                token: data.access_token,
-                                                targets: ls,
-                                            })
-                                            if (re.code != 200)
-                                                checkApiSuccessOrSncakbar(re, "恢复所选收藏失败")
-                                            EventBus.emit('ContactsList.updateContacts')
-                                        }
-                                    })
-                                })()
-                                return true
-                            },
-                        }
-                    ],
-                })}></mdui-button-icon>
+                            {
+                                text: "确定",
+                                onClick: () => {
+                                    ; (async () => {
+                                        const re = await Client.invoke("Chat.removeMembers", {
+                                            token: data.access_token,
+                                            chat_id: chat.id,
+                                            user_ids: [
+                                                id
+                                            ],
+                                        })
+                                        if (re.code != 200)
+                                            checkApiSuccessOrSncakbar(re, "移除群组成员失败")
+                                        EventBus.emit('GroupMembersList.updateMembers')
+                                        snackbar({
+                                            message: `已移除 ${nickname}`,
+                                            placement: "top",
+                                            /* action: "撤销操作",
+                                            onActionClick: async () => {
+                                                const re = await Client.invoke("User.addContacts", {
+                                                    token: data.access_token,
+                                                    targets: ls,
+                                                })
+                                                if (re.code != 200)
+                                                    checkApiSuccessOrSncakbar(re, "恢复所选收藏失败")
+                                                EventBus.emit('ContactsList.updateContacts')
+                                            } */
+                                        })
+                                    })()
+                                    return true
+                                },
+                            }
+                        ],
+                    })
+                }}></mdui-button-icon>
            </div>
        </mdui-list-item>
    )
--- a/client/ui/chat/JoinRequestsList.tsx
+++ b/client/ui/chat/JoinRequestsList.tsx
@@ -1,16 +1,12 @@
 import { TextField } from "mdui"
-import RecentChat from "../../api/client_data/RecentChat.ts"
 import useEventListener from "../useEventListener.ts"
-import RecentsListItem from "./JoinRequestsListItem.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 JoinRequest from "../../api/client_data/JoinRequest.ts"
-import JoinRequestsListItem from "./JoinRequestsListItem.tsx";
+import JoinRequestsListItem from "./JoinRequestsListItem.tsx"
 import Chat from "../../api/client_data/Chat.ts"

 interface Args extends React.HTMLAttributes<HTMLElement> {
--- a/client/ui/chat/JoinRequestsListItem.tsx
+++ b/client/ui/chat/JoinRequestsListItem.tsx
@@ -1,5 +1,4 @@
 import { $ } from "mdui/jq"
-import RecentChat from "../../api/client_data/RecentChat.ts"
 import Avatar from "../Avatar.tsx"
 import React from 'react'
 import JoinRequest from "../../api/client_data/JoinRequest.ts"
--- a/client/ui/dialog/ChatInfoDialog.tsx
+++ b/client/ui/dialog/ChatInfoDialog.tsx
@@ -12,29 +12,32 @@ import openImageViewer from "../openImageViewer.ts"
 import EventBus from "../../EventBus.ts"

 interface Args extends React.HTMLAttributes<HTMLElement> {
-    chat: Chat
+    chat?: Chat
    openChatFragment: (id: string) => void
    chatInfoDialogRef: React.MutableRefObject<Dialog>
-    openUserInfoDialog: (user: User | string) => void
    sharedFavouriteChats: Chat[]
 }

-export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragment, openUserInfoDialog, sharedFavouriteChats }: Args) {
-    const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
+export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragment, sharedFavouriteChats }: Args) {
    const [favourited, setIsFavourited] = React.useState(false)

-    useAsyncEffect(async () => {
-        if (chat == null) return
-        const re = await Client.invoke("Chat.getInfo", {
-            token: data.access_token,
-            target: chat.id,
-        })
-        if (re.code != 200)
-            return checkApiSuccessOrSncakbar(re, '获取对话信息失败')
+    React.useEffect(() => {
+        setIsFavourited(sharedFavouriteChats.map((v) => v.id).indexOf(chat?.id || '') != -1)
+    })

-        const info = re.data as Chat
-        setIsFavourited(sharedFavouriteChats.map((v) => v.id).indexOf(info.id) != -1)
+    const [userId, setUserId] = React.useState<string | null>(null)
+    useAsyncEffect(async () => {
+        if (chat?.type == 'private') {
+            const re = await Client.invoke("Chat.getAnotherUserIdFromPrivate", {
+                token: data.access_token,
+                target: chat.id,
+            })
+            if (re.code != 200)
+                return checkApiSuccessOrSncakbar(re, '获取用户失败')
+            setUserId(re.data!.user_id as string)
+        }
    }, [chat, sharedFavouriteChats])
+
    const avatarUrl = getUrlForFileByHash(chat?.avatar_file_hash as string)

    return (
@@ -47,29 +50,28 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragme
                    width: '50px',
                    height: '50px',
                }} onClick={() => avatarUrl && openImageViewer(avatarUrl)} />
-                <span style={{
-                    marginLeft: "15px",
+                <div style={{
+                    display: 'flex',
+                    marginLeft: '15px',
+                    marginRight: '15px',
                    fontSize: '16.5px',
-                }}>{chat?.title}</span>
+                    flexDirection: 'column',
+                }}>
+                    <span style={{
+                        fontSize: '16.5px'
+                    }}>{chat?.title}</span>
+                    <span style={{
+                        fontSize: '10.5px',
+                        marginTop: '3px',
+                        color: 'rgb(var(--mdui-color-secondary))',
+                    }}>ID: {chat?.type == 'private' ? userId : chat?.id}</span>
+                </div>
            </div>
            <mdui-divider style={{
                marginTop: "10px",
            }}></mdui-divider>

            <mdui-list>
-                {
-                    chat?.type == 'private' &&
-                    <mdui-list-item icon="person" rounded onClick={async () => {
-                        const re = await Client.invoke("Chat.getAnotherUserIdFromPrivate", {
-                            token: data.access_token,
-                            target: chat.id,
-                        })
-                        if (re.code != 200)
-                            return checkApiSuccessOrSncakbar(re, '获取用户失败')
-
-                        openUserInfoDialog(re.data!.user_id as string)
-                    }}>用户详情</mdui-list-item>
-                }
                <mdui-list-item icon={favourited ? "favorite_border" : "favorite"} rounded onClick={() => dialog({
                    headline: favourited ? "取消收藏对话" : "收藏对话",
                    description: favourited ? "确定从收藏对话列表中移除吗? (虽然这不会导致聊天记录丢失)" : "确定要添加到收藏对话列表吗?",
@@ -83,11 +85,11 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragme
                        {
                            text: "确定",
                            onClick: () => {
-                                ;(async () => {
+                                ; (async () => {
                                    const re = await Client.invoke(favourited ? "User.removeContacts" : "User.addContacts", {
                                        token: data.access_token,
                                        targets: [
-                                            chat.id
+                                            chat!.id
                                        ],
                                    })
                                    if (re.code != 200)
@@ -101,7 +103,7 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragme
                })}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
                <mdui-list-item icon="chat" rounded onClick={() => {
                    chatInfoDialogRef.current!.open = false
-                    openChatFragment(chat.id)
+                    openChatFragment(chat!.id)
                }}>打开对话</mdui-list-item>
            </mdui-list>
        </mdui-dialog>
--- a/client/ui/dialog/UserProfileDialog.tsx
+++ b/client/ui/dialog/UserProfileDialog.tsx
@@ -1,63 +0,0 @@
-import * as React from 'react'
-import { Dialog } from "mdui"
-import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
-import Client from "../../api/Client.ts"
-
-import data from "../../Data.ts"
-import Avatar from "../Avatar.tsx"
-import User from "../../api/client_data/User.ts"
-import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
-import openImageViewer from "../openImageViewer.ts"
-import Chat from "../../api/client_data/Chat.ts"
-
-interface Refs {
-    userProfileDialogRef: React.MutableRefObject<Dialog>
-    chatInfoDialogRef: React.MutableRefObject<Dialog>
-    openChatFragment: (id: string) => void
-    user: User
-}
-
-export default function UserProfileDialog({
-    userProfileDialogRef,
-    chatInfoDialogRef,
-    openChatFragment,
-    user
-}: Refs) {
-    const avatarUrl = getUrlForFileByHash(user?.avatar_file_hash)
-    return (
-        <mdui-dialog close-on-overlay-click close-on-esc ref={userProfileDialogRef}>
-            <div style={{
-                display: 'flex',
-                alignItems: 'center',
-            }}>
-                <Avatar src={avatarUrl} text={user?.nickname} style={{
-                    width: '50px',
-                    height: '50px',
-                }} onClick={() => avatarUrl && openImageViewer(avatarUrl)} />
-                <span style={{
-                    marginLeft: "15px",
-                    fontSize: '16.5px',
-                }}>{user?.nickname}</span>
-            </div>
-            <mdui-divider style={{
-                marginTop: "10px",
-            }}></mdui-divider>
-
-            <mdui-list>
-                {/* <mdui-list-item icon="edit" rounded>设置备注</mdui-list-item> */}
-                <mdui-list-item icon="chat" rounded onClick={async () => {
-                    const re = await Client.invoke("Chat.getIdForPrivate", {
-                        token: data.access_token,
-                        target: user.id,
-                    })
-                    if (re.code != 200)
-                        return checkApiSuccessOrSncakbar(re, '获取对话失败')
-                    
-                    openChatFragment(re.data!.chat_id as string)
-                    userProfileDialogRef.current!.open = false
-                    chatInfoDialogRef.current!.open = false
-                }}>对话</mdui-list-item>
-            </mdui-list>
-        </mdui-dialog>
-    )
-}
Author	SHA1	Message	Date
CrescentLeaf	65602f09f2	资料卡展示对话或用户 id	2025-11-23 00:42:12 +08:00
CrescentLeaf	02d6ee4102	移除 UserProfileDialog 并入 ChatInfoDialog	2025-11-23 00:14:52 +08:00
CrescentLeaf	c9fffbeb12	修复由于没有语法检查导致的一系列符号丢失问题, 支持打开群成员的资料卡	2025-11-22 23:51:36 +08:00
CrescentLeaf	ce692bb763	只有群管理才能显示入群请求页面	2025-11-22 23:35:21 +08:00