feat: 群组成员列表

client-protocol/ApiDeclare.ts

@@ -1,42 +1,54 @@
 export type CallMethod = 
+    // 用户验证
     "User.auth" |
     "User.register" |
     "User.login" |
     "User.refreshAccessToken" |
 
+    // 账号
     "User.setAvatar" |
     "User.updateProfile" |
     "User.getMyInfo" |
     "User.resetPassword" |
 
+    // 用户资料
     "User.getInfo" |
 
+    // 收藏对话列表
     "User.getMyContacts" |
     "User.addContacts" |
     "User.removeContacts" |
 
+    // 最近对话列表
     "User.getMyRecentChats" | 
 
+    // 对话信息
     "Chat.getInfo" |
+    "Chat.getAnotherUserIdFromPrivate" |
+    "Chat.getMembers" | 
     
+    // 对话设置
     "Chat.updateSettings" |
     "Chat.setAvatar" |
 
+    // 对话创建
     "Chat.createGroup" |
-
     "Chat.getIdForPrivate" |
-    "Chat.getAnotherUserIdFromPrivate" |
 
+    // 入群请求
     "Chat.processJoinRequest" |
     "Chat.sendJoinRequest" |
     "Chat.getJoinRequests" |
 
+    // 对话消息
     "Chat.sendMessage" |
-    "Chat.getMessageHistory" |
+    "Chat.getMessageHistory"
 
-    "Chat.uploadFile"
+    // (废弃) 文件上传
+    // "Chat.uploadFile"
 
 export type ClientEvent = 
+    // 对话收消息
     "Client.onMessage"
 
 export const CallableMethodBeforeAuth = [

client/api/ApiDeclare.ts

@@ -1,42 +1,54 @@
 export type CallMethod = 
+    // 用户验证
     "User.auth" |
     "User.register" |
     "User.login" |
     "User.refreshAccessToken" |
 
+    // 账号
     "User.setAvatar" |
     "User.updateProfile" |
     "User.getMyInfo" |
     "User.resetPassword" |
 
+    // 用户资料
     "User.getInfo" |
 
+    // 收藏对话列表
     "User.getMyContacts" |
     "User.addContacts" |
     "User.removeContacts" |
 
+    // 最近对话列表
     "User.getMyRecentChats" | 
 
+    // 对话信息
     "Chat.getInfo" |
+    "Chat.getAnotherUserIdFromPrivate" |
+    "Chat.getMembers" | 
     
+    // 对话设置
     "Chat.updateSettings" |
     "Chat.setAvatar" |
 
+    // 对话创建
     "Chat.createGroup" |
-
     "Chat.getIdForPrivate" |
-    "Chat.getAnotherUserIdFromPrivate" |
 
+    // 入群请求
     "Chat.processJoinRequest" |
     "Chat.sendJoinRequest" |
     "Chat.getJoinRequests" |
 
+    // 对话消息
     "Chat.sendMessage" |
-    "Chat.getMessageHistory" |
+    "Chat.getMessageHistory"
 
-    "Chat.uploadFile"
+    // (废弃) 文件上传
+    // "Chat.uploadFile"
 
 export type ClientEvent = 
+    // 对话收消息
     "Client.onMessage"
 
 export const CallableMethodBeforeAuth = [

client/ui/chat/ChatFragment.tsx

@@ -30,6 +30,7 @@ import SystemMessage from "./SystemMessage.tsx"
 import JoinRequestsList from "./JoinRequestsList.tsx"
 import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 import escapeHTML from "../../escapeHtml.ts"
+import GroupMembersList from "./GroupMembersList.tsx"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     target: string
@@ -89,7 +90,7 @@ const markedInstance = new marked.Marked({
                     case "ChatMention":
                         return `<chat-mention chat-id="${escapeHTML(/^tws:\/\/chat\?id=(.*)/.exec(href)?.[1] || '')}" text="${escapeHTML(/^ChatMention=(.*)/.exec(text)?.[1] || '')}">PH</chat-mention>`
                 }
-            return `<chat-text em="true">${ escapeHTML(`[无效数据 (<${text}>=${href})]`) }</chat-text>`
+            return `<chat-text em="true">${escapeHTML(`[无效数据 (<${text}>=${href})]`)}</chat-text>`
         },
     }
 })
@@ -339,6 +340,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                     chatInfo.is_member ? <>
                         <mdui-tab value="Chat">{chatInfo.title}</mdui-tab>
                         {chatInfo.type == 'group' && chatInfo.is_admin && <mdui-tab value="NewMemberRequests">加入请求</mdui-tab>}
+                        {chatInfo.type == 'group' && <mdui-tab value="GroupMembers">群组成员</mdui-tab>}
                     </>
                         : <mdui-tab value="RequestJoin">{chatInfo.title}</mdui-tab>
                 }
@@ -559,6 +561,15 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                         </div>
                     </div>
                 </mdui-tab-panel>
+                {
+                    chatInfo.type == 'group' && <mdui-tab-panel slot="panel" value="GroupMembers" style={{
+                        display: tabItemSelected == "GroupMembers" ? "flex" : "none",
+                        flexDirection: "column",
+                        height: "100%",
+                    }}>
+                        {tabItemSelected == "GroupMembers" && <GroupMembersList target={target} />}
+                    </mdui-tab-panel>
+                }
                 {
                     chatInfo.type == 'group' && <mdui-tab-panel slot="panel" value="NewMemberRequests" style={{
                         display: tabItemSelected == "NewMemberRequests" ? "flex" : "none",
@@ -603,13 +614,6 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                                     description="以便于添加, 可留空"
                                     state={groupPreferenceStore.state.group_name || ''}
                                     disabled={!chatInfo.is_admin} />
-                                {/* <PreferenceHeader
-                                    title="群组管理" />
-                                <Preference
-                                    title="群组成员列表"
-                                    icon="group"
-                                    disabled={true || !chatInfo.is_admin}
-                                    description="别看了, 还没做" /> */}
                                 <PreferenceHeader
                                     title="入群设定" />
                                 <SwitchPreference

client/ui/chat/GroupMembersList.tsx

@@ -0,0 +1,74 @@
+import { TextField } from "mdui"
+import useEventListener from "../useEventListener.ts"
+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 GroupMembersListItem from "./GroupMembersListItem.tsx"
+import User from "../../api/client_data/User.ts"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    target: string
+}
+
+export default function GroupMembersList({
+    target,
+    ...props
+}: Args) {
+    const searchRef = React.useRef<HTMLElement>(null)
+    const [searchText, setSearchText] = React.useState('')
+    const [groupMembers, setGroupMembers] = React.useState<User[]>([])
+
+    useEventListener(searchRef, 'input', (e) => {
+        setSearchText((e.target as unknown as TextField).value)
+    })
+
+    useAsyncEffect(async () => {
+        async function updateMembers() {
+            const re = await Client.invoke("Chat.getMembers", {
+                token: data.access_token,
+                target: target,
+            })
+            if (re.code != 200)
+                return checkApiSuccessOrSncakbar(re, "获取群组成员列表失败")
+
+            setGroupMembers(re.data!.members as User[])
+        }
+        updateMembers()
+        EventBus.on('GroupMembersList.updateMembers', () => updateMembers())
+        setTimeout(() => updateMembers(), 15 * 1000)
+    })
+
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingRight: '10px',
+        paddingLeft: '10px',
+        height: '100%',
+        width: '100%',
+    }} {...props}>
+        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
+            marginTop: '5px',
+            marginBottom: '13px',
+        }}></mdui-text-field>
+
+        <mdui-list-item rounded style={{
+            width: '100%',
+            marginBottom: '15px',
+        }} icon="refresh" onClick={() => EventBus.emit('GroupMembersList.updateMembers')}>刷新</mdui-list-item>
+
+        {
+            groupMembers.filter((user) =>
+                searchText == '' ||
+                user.nickname.includes(searchText) ||
+                user.username?.includes(searchText) ||
+                user.id.includes(searchText)
+            ).map((v) =>
+                <GroupMembersListItem
+                    key={v.id}
+                    user={v} />
+            )
+        }
+    </mdui-list>
+}

client/ui/chat/GroupMembersListItem.tsx

@@ -0,0 +1,28 @@
+import { $ } from "mdui/jq"
+import Avatar from "../Avatar.tsx"
+import React from 'react'
+import User from "../../api/client_data/User.ts"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    user: User
+}
+
+export default function GroupMembersListItem({ user }: Args) {
+    const { nickname, avatar_file_hash } = user
+
+    const itemRef = React.useRef<HTMLElement>(null)
+    return (
+        <mdui-list-item rounded style={{
+            marginTop: '3px',
+            marginBottom: '3px',
+        }} ref={itemRef}>
+            {nickname}
+            <Avatar src={getUrlForFileByHash(avatar_file_hash)} text={nickname} slot="icon" />
+            {/* <div slot="end-icon">
+                <mdui-button-icon icon="check"></mdui-button-icon>
+                <mdui-button-icon icon="delete"></mdui-button-icon>
+            </div> */}
+        </mdui-list-item>
+    )
+}

client/ui/dialog/ChatInfoDialog.tsx

@@ -3,7 +3,7 @@ import Chat from "../../api/client_data/Chat.ts"
 import useAsyncEffect from "../useAsyncEffect.ts"
 import Client from "../../api/Client.ts"
 import data from "../../Data.ts"
-import { Dialog } from "mdui"
+import { dialog, Dialog } from "mdui"
 import Avatar from "../Avatar.tsx"
 import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
 import User from "../../api/client_data/User.ts"
@@ -33,8 +33,7 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragme
             return checkApiSuccessOrSncakbar(re, '获取对话信息失败')
 
         const info = re.data as Chat
-        setChatInfo(info)
-        setIsFavourited(sharedFavouriteChats.indexOf(info) != -1)
+        setIsFavourited(sharedFavouriteChats.map((v) => v.id).indexOf(info.id) != -1)
     }, [chat, sharedFavouriteChats])
     const avatarUrl = getUrlForFileByHash(chat?.avatar_file_hash as string)
 
@@ -71,21 +70,39 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragme
                         openUserInfoDialog(re.data!.user_id as string)
                     }}>用户详情</mdui-list-item>
                 }
-                <mdui-list-item icon={favourited ? "favorite_border" : "favorite"} rounded onClick={async () => {
-                    const re = await Client.invoke(favourited ? "User.removeContacts" : "User.addContacts", {
-                        token: data.access_token,
-                        targets: [
-                            chat.id
-                        ],
-                    })
-                    if (re.code != 200)
-                        checkApiSuccessOrSncakbar(re, favourited ? "取消收藏失败" : "收藏失败")
-                    EventBus.emit('ContactsList.updateContacts')
-                }}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
+                <mdui-list-item icon={favourited ? "favorite_border" : "favorite"} rounded onClick={() => dialog({
+                    headline: favourited ? "取消收藏对话" : "收藏对话",
+                    description: favourited ? "确定从收藏对话列表中移除吗? (虽然这不会导致聊天记录丢失)" : "确定要添加到收藏对话列表吗?",
+                    actions: [
+                        {
+                            text: "取消",
+                            onClick: () => {
+                                return true
+                            },
+                        },
+                        {
+                            text: "确定",
+                            onClick: () => {
+                                ;(async () => {
+                                    const re = await Client.invoke(favourited ? "User.removeContacts" : "User.addContacts", {
+                                        token: data.access_token,
+                                        targets: [
+                                            chat.id
+                                        ],
+                                    })
+                                    if (re.code != 200)
+                                        checkApiSuccessOrSncakbar(re, favourited ? "取消收藏失败" : "收藏失败")
+                                    EventBus.emit('ContactsList.updateContacts')
+                                })()
+                                return true
+                            },
+                        }
+                    ],
+                })}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
                 <mdui-list-item icon="chat" rounded onClick={() => {
                     chatInfoDialogRef.current!.open = false
                     openChatFragment(chat.id)
-                }}>打开此对话</mdui-list-item>
+                }}>打开对话</mdui-list-item>
             </mdui-list>
         </mdui-dialog>
     )

server/api/ApiDeclare.ts

@@ -1,40 +1,59 @@
 export type CallMethod = 
+    // 用户验证
     "User.auth" |
     "User.register" |
     "User.login" |
     "User.refreshAccessToken" |
 
+    // 账号
     "User.setAvatar" |
     "User.updateProfile" |
     "User.getMyInfo" |
     "User.resetPassword" |
 
+    // 用户资料
     "User.getInfo" |
 
+    // 收藏对话列表
     "User.getMyContacts" |
     "User.addContacts" |
     "User.removeContacts" |
 
+    // 最近对话列表
     "User.getMyRecentChats" | 
 
+    // 对话信息
     "Chat.getInfo" |
+    "Chat.getAnotherUserIdFromPrivate" |
+    "Chat.getMembers" | 
     
+    // 对话设置
     "Chat.updateSettings" |
     "Chat.setAvatar" |
 
+    // 对话创建
     "Chat.createGroup" |
-
     "Chat.getIdForPrivate" |
-    "Chat.getAnotherUserIdFromPrivate" |
 
+    // 入群请求
     "Chat.processJoinRequest" |
     "Chat.sendJoinRequest" |
     "Chat.getJoinRequests" |
 
+    // 对话消息
     "Chat.sendMessage" |
-    "Chat.getMessageHistory" |
+    "Chat.getMessageHistory"
 
-    "Chat.uploadFile"
+    // (废弃) 文件上传
+    // "Chat.uploadFile"
 
 export type ClientEvent = 
+    // 对话收消息
     "Client.onMessage"
+
+export const CallableMethodBeforeAuth = [
+    "User.auth",
+    "User.register",
+    "User.login",
+    "User.refreshAccessToken",
+]

server/api/ChatApi.ts

@@ -620,5 +620,48 @@ export default class ChatApi extends BaseApi {
                 msg: "非私聊对话",
             }
         })
+        /**
+         * 获取所有的加入对话申请
+         * @param token 令牌
+         * @param target ID
+         */
+        this.registerEvent("Chat.getMembers", (args, { deviceId }) => {
+            if (this.checkArgsMissing(args, ['token', 'target'])) return {
+                msg: "参数缺失",
+                code: 400,
+            }
+
+            const token = TokenManager.decode(args.token as string)
+            if (!this.checkToken(token, deviceId)) return {
+                code: 401,
+                msg: "令牌无效",
+            }
+
+            const chat = Chat.findById(args.target as string)
+            if (chat == null) return {
+                code: 404,
+                msg: "对话不存在",
+            }
+            if (!UserChatLinker.checkUserIsLinkedToChat(token.author, chat!.bean.id)) return {
+                code: 403,
+                msg: "用户无权访问此对话",
+            }
+
+            return {
+                code: 200,
+                msg: '成功',
+                data: {
+                    members: chat.getMembersList().map((v) => {
+                        const user = User.findById(v)
+                        return user && {
+                            id: user?.bean.id,
+                            nickname: user.getNickName(),
+                            username: user.getUserName(),
+                            avatar_file_hash: user.getAvatarFileHash(),
+                        }
+                    }),
+                }
+            }
+        })
     }
 }

server/data/UserChatLinker.ts

@@ -15,6 +15,8 @@ export default class UserChatLinker {
                 /* Chat ID */ chat_id TEXT NOT NULL
             );
        `)
+        db.exec(`CREATE INDEX IF NOT EXISTS idx_chat_id ON UserChatLinker(chat_id);`)
+        db.exec(`CREATE INDEX IF NOT EXISTS idx_user_id ON UserChatLinker(user_id);`)
         return db
     }