feat: 群组成员列表

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>
+    )
+}