feat: 增加好友选择组件

用于创建多人会话

web/src/components/FriendPicker.tsx

@@ -0,0 +1,100 @@
+import { Checkbox, Input } from 'antd';
+import React, { useCallback, useState } from 'react';
+import {
+  getCachedUserInfo,
+  t,
+  useAppSelector,
+  useAsync,
+} from 'tailchat-shared';
+import _take from 'lodash/take';
+import _without from 'lodash/without';
+import { Avatar } from './Avatar';
+
+interface FriendPickerProps {
+  /**
+   * 排除的用户id
+   * 在选择好友时会进行过滤
+   */
+  withoutUserIds?: string[];
+
+  /**
+   * 是否包含搜索框
+   * 默认为 true
+   */
+  withSearch?: boolean;
+
+  selectedIds: string[];
+  onChange: (selectedIds: string[]) => void;
+}
+export const FriendPicker: React.FC<FriendPickerProps> = React.memo((props) => {
+  const {
+    withoutUserIds = [],
+    withSearch = true,
+    selectedIds,
+    onChange,
+  } = props;
+  const [searchValue, setSearchValue] = useState('');
+  const friendIds = useAppSelector((state) =>
+    state.user.friends.filter((id) => !withoutUserIds.includes(id))
+  );
+
+  const { value: friendInfoList = [] } = useAsync(() => {
+    return Promise.all(friendIds.map((id) => getCachedUserInfo(id)));
+  }, [friendIds.join(',')]);
+
+  const handleSelectUser = useCallback(
+    (userId: string, isSelected: boolean) => {
+      if (isSelected === true) {
+        // 添加
+        if (selectedIds.includes(userId)) {
+          return;
+        }
+
+        typeof onChange === 'function' && onChange([...selectedIds, userId]);
+      } else {
+        // 移除
+        typeof onChange === 'function' &&
+          onChange(_without(selectedIds, userId));
+      }
+    },
+    [selectedIds, onChange]
+  );
+
+  return (
+    <div>
+      {withSearch && (
+        <Input
+          placeholder={t('搜索好友')}
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+        />
+      )}
+
+      <div>
+        {t('已选择')}: {selectedIds.length}
+      </div>
+
+      {_take(
+        friendInfoList.filter((info) => info.nickname.includes(searchValue)),
+        5
+      ).map((info) => {
+        return (
+          <div key={info._id} className="my-1">
+            <Checkbox
+              className="mr-2 items-center"
+              checked={selectedIds.includes(info._id)}
+              onChange={(e) => handleSelectUser(info._id, e.target.checked)}
+            >
+              <div className="flex items-center">
+                <Avatar size="small" name={info.nickname} src={info.avatar} />
+
+                <div className="ml-1 text-white">{info.nickname}</div>
+              </div>
+            </Checkbox>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+FriendPicker.displayName = 'FriendPicker';

web/src/components/modals/CreateDMConverse.tsx

@@ -0,0 +1,34 @@
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import { t } from 'tailchat-shared';
+import { FriendPicker } from '../FriendPicker';
+import { ModalWrapper } from '../Modal';
+
+interface CreateDMCOnverseProps {
+  /**
+   * 排除的用户id
+   * 在选择好友时会进行过滤
+   */
+  withoutUserIds?: string[];
+}
+export const CreateDMCOnverse: React.FC<CreateDMCOnverseProps> = React.memo(
+  (props) => {
+    const { withoutUserIds = [] } = props;
+    const [selectedFriendIds, setSelectedFriendIds] = useState<string[]>([]);
+
+    return (
+      <ModalWrapper title={t('创建多人会话')}>
+        <FriendPicker
+          withoutUserIds={withoutUserIds}
+          selectedIds={selectedFriendIds}
+          onChange={setSelectedFriendIds}
+        />
+
+        <div className="text-right">
+          <Button type="primary">{t('创建')}</Button>
+        </div>
+      </ModalWrapper>
+    );
+  }
+);
+CreateDMCOnverse.displayName = 'CreateDMCOnverse';

web/src/routes/Main/Content/Personal/Sidebar.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { Icon } from '@iconify/react';
 import { SidebarItem } from '../SidebarItem';
-import { showToasts, t, useDMConverseList } from 'tailchat-shared';
+import { t, useDMConverseList } from 'tailchat-shared';
 import { SidebarDMItem } from './SidebarDMItem';
+import { openModal } from '@/components/Modal';
+import { CreateDMCOnverse } from '@/components/modals/CreateDMConverse';
+import DevContainer from '@/components/DevContainer';
 
 const SidebarSection: React.FC<{
   action: React.ReactNode;
@@ -41,10 +44,12 @@ export const PersonalSidebar: React.FC = React.memo(() => {
 
       <SidebarSection
         action={
+          <DevContainer>
             <Icon
               icon="mdi:plus"
-            onClick={() => showToasts('该功能正在开发中')}
+              onClick={() => openModal(<CreateDMCOnverse />)}
             />
+          </DevContainer>
         }
       >
         {t('私信')}