feat: 增加群组成员搜索功能

web/src/components/Panel/group/MembersPanel.tsx

@@ -1,6 +1,9 @@
+import { Icon } from '@/components/Icon';
 import { UserListItem } from '@/components/UserListItem';
-import React from 'react';
+import { Input, Skeleton } from 'antd';
-import { useGroupInfo } from 'tailchat-shared';
+import React, { useMemo, useState } from 'react';
+import { t, useGroupInfo } from 'tailchat-shared';
+import { useUserInfoList } from 'tailchat-shared/hooks/model/useUserInfoList';
 
 interface MembersPanelProps {
   groupId: string;
@@ -12,11 +15,30 @@ interface MembersPanelProps {
 export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
   const groupInfo = useGroupInfo(props.groupId);
   const members = groupInfo?.members ?? [];
+  const userInfoList = useUserInfoList(members.map((m) => m.userId));
+  const [searchStr, setSearchStr] = useState('');
+
+  const filteredGroupMembers = useMemo(() => {
+    return userInfoList.filter((u) => u.nickname.includes(searchStr));
+  }, [userInfoList, searchStr]);
+
+  if (userInfoList.length === 0) {
+    return <Skeleton />;
+  }
 
   return (
     <div>
-      {members.map((member) => (
+      <div className="p-2">
-        <UserListItem key={member.userId} userId={member.userId} />
+        <Input
+          placeholder={t('搜索成员')}
+          size="large"
+          suffix={<Icon fontSize={20} color="grey" icon="mdi:magnify" />}
+          onChange={(e) => setSearchStr(e.target.value)}
+        />
+      </div>
+
+      {filteredGroupMembers.map((member) => (
+        <UserListItem key={member._id} userId={member._id} />
       ))}
     </div>
   );

web/src/components/UserListItem.tsx

@@ -15,6 +15,7 @@ export const UserListItem: React.FC<UserListItemProps> = React.memo((props) => {
   const userName = userInfo.nickname;
 
   const handleClick = useCallback(() => {
+    // TODO 点击展开用户信息卡片
     console.log('clicked avatar');
   }, []);
 

web/src/styles/antd/dark.less

@@ -102,6 +102,12 @@
       border-width: 0 !important;
     }
   }
+  // 输入框(带前后缀)
+  .ant-input-affix-wrapper {
+    color: rgba(255, 255, 255, 0.65);
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
 
   // 复选框
   .ant-checkbox-wrapper {