From 4cb75222512a7c111e32690a928cf1e0e11bd7c5 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Sat, 22 Nov 2025 01:25:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BE=A4=E7=BB=84=E6=88=90=E5=91=98?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/chat/ChatFragment.tsx         | 20 ++++---
 client/ui/chat/GroupMembersList.tsx     | 74 +++++++++++++++++++++++++
 client/ui/chat/GroupMembersListItem.tsx | 28 ++++++++++
 server/api/ChatApi.ts                   | 43 ++++++++++++++
 4 files changed, 157 insertions(+), 8 deletions(-)
 create mode 100644 client/ui/chat/GroupMembersList.tsx
 create mode 100644 client/ui/chat/GroupMembersListItem.tsx

diff --git a/client/ui/chat/ChatFragment.tsx b/client/ui/chat/ChatFragment.tsx
index ed357c6..eae0c26 100644
--- a/client/ui/chat/ChatFragment.tsx
+++ b/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
diff --git a/client/ui/chat/GroupMembersList.tsx b/client/ui/chat/GroupMembersList.tsx
new file mode 100644
index 0000000..1dac097
--- /dev/null
+++ b/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>
+}
\ No newline at end of file
diff --git a/client/ui/chat/GroupMembersListItem.tsx b/client/ui/chat/GroupMembersListItem.tsx
new file mode 100644
index 0000000..8020a8f
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/server/api/ChatApi.ts b/server/api/ChatApi.ts
index 4620745..694e38a 100644
--- a/server/api/ChatApi.ts
+++ b/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(),
+                        }
+                    }),
+                }
+            }
+        })
     }
 }
\ No newline at end of file