feat(web): 增加团请求加入列表

src/shared/model/group.ts

@@ -50,6 +50,14 @@ export interface GroupInviteCodeInfo {
   times: number;
 }
 
+export interface GroupRequestItem {
+  uuid: string;
+  group_uuid: string;
+  from_uuid: string;
+  is_agree: boolean;
+  is_refuse: boolean;
+}
+
 /**
  * 获取团信息
  * @param groupUUID 团UUID
@@ -278,3 +286,37 @@ export const fetchGroupActorDetail = async (
 
   return data.groupActor;
 };
+
+/**
+ * 获取团请求加入列表
+ * @param groupUUID 团UUID
+ */
+export async function fetchGroupRequestList(
+  groupUUID: string
+): Promise<GroupRequestItem[]> {
+  const { data } = await request.get(
+    `/group/request/list?groupUUID=${groupUUID}`
+  );
+
+  return data.list;
+}
+
+/**
+ * 同意入团请求
+ * @param requestUUID 入团请求UUID
+ */
+export async function requestAgreeGroupRequest(requestUUID: string) {
+  await request.post('/group/request/agree', {
+    requestUUID,
+  });
+}
+
+/**
+ * 拒绝入团请求
+ * @param requestUUID 入团请求UUID
+ */
+export async function requestRefuseGroupRequest(requestUUID: string) {
+  await request.post('/group/request/refuse', {
+    requestUUID,
+  });
+}

src/web/routes/Main/Content/Group/GroupInfoDetail/GroupMemberManage.tsx

@@ -18,6 +18,10 @@ import {
 } from '@shared/model/group';
 import { showAlert, showToasts } from '@shared/manager/ui';
 import { UpSquareOutlined, DownSquareOutlined } from '@ant-design/icons';
+import { PillTabs } from '@web/components/PillTabs';
+import { GroupRequestList } from './GroupRequestList';
+
+const { TabPane } = PillTabs;
 
 const GroupMemberItemContainer = styled.div`
   padding: 10px;
@@ -122,9 +126,21 @@ export const GroupMemberManage: React.FC<GroupMemberManageProps> = TMemo(
           {t('成员管理')}({memberUUIDs.length})
         </Typography.Title>
 
-        {memberUUIDs.map((uuid) => (
-          <GroupMemberItem key={uuid} groupUUID={groupUUID} userUUID={uuid} />
-        ))}
+        <PillTabs defaultActiveKey="1">
+          <TabPane tab={t('当前')} key="1">
+            {memberUUIDs.map((uuid) => (
+              <GroupMemberItem
+                key={uuid}
+                groupUUID={groupUUID}
+                userUUID={uuid}
+              />
+            ))}
+          </TabPane>
+
+          <TabPane tab={t('请求加入')} key="2">
+            <GroupRequestList groupUUID={groupUUID} />
+          </TabPane>
+        </PillTabs>
       </div>
     );
   }

src/web/routes/Main/Content/Group/GroupInfoDetail/GroupRequestList.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback, useEffect } from 'react';
+import { TMemo } from '@shared/components/TMemo';
+import { useAsync, useAsyncFn } from 'react-use';
+import {
+  fetchGroupRequestList,
+  GroupRequestItem,
+  requestAgreeGroupRequest,
+  requestRefuseGroupRequest,
+} from '@shared/model/group';
+import { Loading } from '@web/components/Loading';
+import { UserListItem } from '@web/components/UserListItem';
+import { Button, Empty } from 'antd';
+import _isNil from 'lodash/isNil';
+import { useTranslation } from '@shared/i18n';
+
+const RequestItem: React.FC<{
+  requestInfo: GroupRequestItem;
+  onRefresh: () => void;
+}> = TMemo(({ requestInfo, onRefresh }) => {
+  const { t } = useTranslation();
+  const handleAgreeGroupRequest = useCallback(async () => {
+    await requestAgreeGroupRequest(requestInfo.uuid);
+    onRefresh();
+  }, [requestInfo.uuid, onRefresh]);
+
+  const handleRefuseGroupRequest = useCallback(async () => {
+    await requestRefuseGroupRequest(requestInfo.uuid);
+    onRefresh();
+  }, [requestInfo.uuid, onRefresh]);
+
+  return (
+    <UserListItem
+      userUUID={requestInfo.from_uuid}
+      actions={[
+        <Button type="ghost" key="refuse" onClick={handleRefuseGroupRequest}>
+          {t('拒绝')}
+        </Button>,
+        <Button type="primary" key="agree" onClick={handleAgreeGroupRequest}>
+          {t('同意')}
+        </Button>,
+      ]}
+    />
+  );
+});
+RequestItem.displayName = 'RequestItem';
+
+interface GroupRequestListProps {
+  groupUUID: string;
+}
+export const GroupRequestList: React.FC<GroupRequestListProps> = TMemo(
+  (props) => {
+    const { groupUUID } = props;
+
+    const [
+      { value: requestList, loading },
+      fetchList,
+    ] = useAsyncFn(async () => {
+      return fetchGroupRequestList(groupUUID);
+    }, [groupUUID]);
+
+    useEffect(() => {
+      fetchList();
+    }, []);
+
+    if (loading) {
+      return <Loading />;
+    }
+
+    if (_isNil(requestList) || !Array.isArray(requestList)) {
+      return null;
+    }
+
+    if (requestList.length === 0) {
+      return <Empty />;
+    }
+
+    return (
+      <div>
+        {requestList.map((item) => (
+          <RequestItem
+            key={item.uuid}
+            requestInfo={item}
+            onRefresh={fetchList}
+          />
+        ))}
+      </div>
+    );
+  }
+);
+GroupRequestList.displayName = 'GroupRequestList';