feat(web): 团成员列表增加了分类

区分了拥有者 主持人 成员三类

Author: moonrailgun

src/shared/i18n/langs/en-US/translation.json

@@ -52,6 +52,7 @@
   "k672fb6c8": "Please Select Search Method...",
   "k68022ee7": "All",
   "k6b8145c2": "Login Result",
+  "k74aef1ad": "Members",
   "k77ee6a43": "Member Manage",
   "k7c232f9e": "Panel",
   "k8004f31b": "Tick",
@@ -101,6 +102,7 @@
   "kd3de39b4": "Update Success",
   "kd8702fdb": "No Search Result",
   "kda3ac7f9": "Bot",
+  "kdc29028f": "Moderator",
   "kdc2b5fe0": "Login Time",
   "kdebc1ec9": "Select from Friends",
   "kdf2b27a": "Gender",
@@ -118,6 +120,7 @@
   "kee8ae330": "Query",
   "kefa5d64e": "Ensure to delete actor? Cannot recover this operation.",
   "kf15499b4": "Logout",
+  "kf1fd2c49": "Owner",
   "kf3d7ac0e": "Searching...",
   "kf4567a1": "Copy Invite Link",
   "kf5d66247": "Panel Name",

src/shared/i18n/langs/zh-CN/translation.json

@@ -52,6 +52,7 @@
   "k672fb6c8": "请选择搜索方式...",
   "k68022ee7": "全部",
   "k6b8145c2": "登录结果",
+  "k74aef1ad": "成员",
   "k77ee6a43": "成员管理",
   "k7c232f9e": "面板",
   "k8004f31b": "踢出团",
@@ -101,6 +102,7 @@
   "kd3de39b4": "更新成功",
   "kd8702fdb": "暂无搜索结果",
   "kda3ac7f9": "机器人",
+  "kdc29028f": "主持人",
   "kdc2b5fe0": "登录时间",
   "kdebc1ec9": "从好友中选择",
   "kdf2b27a": "性别",
@@ -118,6 +120,7 @@
   "kee8ae330": "查询",
   "kefa5d64e": "你确定要删除该人物卡么？删除后无法找回",
   "kf15499b4": "退出登录",
+  "kf1fd2c49": "拥有者",
   "kf3d7ac0e": "正在搜索中...",
   "kf4567a1": "复制邀请链接",
   "kf5d66247": "面板名",

src/shared/redux/hooks/group.ts

@@ -4,6 +4,7 @@ import { useCurrentUserInfo, useCurrentUserUUID } from './user';
 import _get from 'lodash/get';
 import _uniq from 'lodash/uniq';
 import _isNil from 'lodash/isNil';
+import _without from 'lodash/without';
 import { useMemo } from 'react';
 import { GroupPanel } from '@shared/types/panel';
 import { isGroupPanelVisible } from '@shared/helper/group';
@@ -91,19 +92,30 @@ export function useSelectedGroupActorInfo(
 }
 
 /**
- * 获取团UUID管理员列表
+ * 获取团管理员列表
  * @param groupUUID 团UUID
  */
 export function useGroupManagerUUIDs(groupUUID: string): string[] {
-  const group = useTRPGSelector((state) =>
-    state.group.groups.find((g) => g.uuid === groupUUID)
-  );
+  const group = useJoinedGroupInfo(groupUUID);
   if (_isNil(group)) {
     return [];
   }
   return _uniq([group.owner_uuid, ...group.managers_uuid!]);
 }
 
+/**
+ * 获取团普通成员列表
+ * @param groupUUID 团UUID
+ */
+export function useGroupNormalMembers(groupUUID: string): string[] {
+  const group = useJoinedGroupInfo(groupUUID);
+  if (_isNil(group)) {
+    return [];
+  }
+
+  return _uniq(_without(group.group_members, ...(group.managers_uuid ?? [])));
+}
+
 /**
  * 检测一个用户是否是团管理员
  * @param groupUUID 团UUID

src/web/routes/Main/Content/Group/GroupPanel/GroupChatPanel.tsx

@@ -5,10 +5,8 @@ import { Iconfont } from '@web/components/Iconfont';
 import styled from 'styled-components';
 import { useJoinedGroupInfo } from '@redux/hooks/group';
 import _isNil from 'lodash/isNil';
-import { UserListItem } from '@web/components/UserListItem';
 import { GroupActorSelector } from './GroupActorSelector';
-import { TPopover } from '@web/components/popover';
-import PopoverUserInfo from '@web/components/popover/UserInfo';
+import { GroupMembers } from './GroupMembers';
 
 const Root = styled.div`
   display: flex;
@@ -28,19 +26,6 @@ export const GroupChatPanel: React.FC<GroupChatPanelProps> = TMemo((props) => {
     return null;
   }
 
-  const members = (groupInfo.group_members ?? []).map((uuid) => (
-    <TPopover
-      key={uuid}
-      placement="left"
-      trigger="click"
-      content={<PopoverUserInfo userUUID={uuid} />}
-    >
-      <div>
-        <UserListItem userUUID={uuid} />
-      </div>
-    </TPopover>
-  ));
-
   return (
     <Root>
       <ChatContainer
@@ -56,7 +41,7 @@ export const GroupChatPanel: React.FC<GroupChatPanelProps> = TMemo((props) => {
             &#xe603;
           </Iconfont>,
         ]}
-        rightPanel={showMembers && <div>{members}</div>}
+        rightPanel={showMembers && <GroupMembers groupUUID={groupUUID} />}
       />
     </Root>
   );

src/web/routes/Main/Content/Group/GroupPanel/GroupMembers.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { TMemo } from '@shared/components/TMemo';
+import { useTranslation } from '@shared/i18n';
+import {
+  useGroupManagerUUIDs,
+  useJoinedGroupInfo,
+  useGroupNormalMembers,
+} from '@redux/hooks/group';
+import _isNil from 'lodash/isNil';
+import _without from 'lodash/without';
+import { TPopover } from '@web/components/popover';
+import PopoverUserInfo from '@web/components/popover/UserInfo';
+import { UserListItem } from '@web/components/UserListItem';
+
+function renderMemberList(uuids: string[]) {
+  return uuids.map((uuid) => (
+    <TPopover
+      key={uuid}
+      placement="left"
+      trigger="click"
+      content={<PopoverUserInfo userUUID={uuid} />}
+    >
+      <div>
+        <UserListItem userUUID={uuid} />
+      </div>
+    </TPopover>
+  ));
+}
+
+interface GroupMembersProps {
+  groupUUID: string;
+}
+export const GroupMembers: React.FC<GroupMembersProps> = TMemo((props) => {
+  const { groupUUID } = props;
+  const { t } = useTranslation();
+  const groupInfo = useJoinedGroupInfo(groupUUID);
+  const allManagers = useGroupManagerUUIDs(groupUUID);
+  const normalMembers = useGroupNormalMembers(groupUUID);
+  const filterManagers = _without<string>(
+    allManagers,
+    groupInfo?.owner_uuid ?? ''
+  );
+
+  if (_isNil(groupInfo)) {
+    return null;
+  }
+
+  return (
+    <div>
+      <div>{t('拥有者')}</div>
+      {renderMemberList([groupInfo.owner_uuid])}
+      <div>{t('主持人')}</div>
+      {renderMemberList(filterManagers)}
+      <div>{t('成员')}</div>
+      {renderMemberList(normalMembers)}
+    </div>
+  );
+});
+GroupMembers.displayName = 'GroupMembers';