feat: 禁言功能操作菜单

shared/model/group.ts

@@ -9,6 +9,10 @@ export enum GroupPanelType {
 export interface GroupMember {
   role: string; // 角色
   userId: string;
+  /**
+   * 日期字符串 禁言到xxx
+   */
+  muteUntil?: string;
 }
 
 export interface GroupPanel {

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

@@ -1,12 +1,16 @@
 import { Icon } from '@/components/Icon';
 import { GroupUserPopover } from '@/components/popover/GroupUserPopover';
 import { UserListItem } from '@/components/UserListItem';
-import { Divider, Input, Skeleton } from 'antd';
+import { Divider, Dropdown, Input, Menu, Skeleton } from 'antd';
 import React, { useMemo } from 'react';
 import {
+  GroupMember,
+  isDevelopment,
   t,
+  useAsyncRequest,
   useCachedOnlineStatus,
   useGroupInfo,
+  useIsGroupOwner,
   UserBaseInfo,
   useSearch,
 } from 'tailchat-shared';
@@ -16,6 +20,19 @@ interface MembersPanelProps {
   groupId: string;
 }
 
+function getMembersMuteUntil(
+  members: GroupMember[],
+  userId: string
+): string | undefined {
+  const member = members.find((m) => m.userId === userId);
+
+  if (!member) {
+    return undefined;
+  }
+
+  return member.muteUntil;
+}
+
 /**
  * 用户面板
  */
@@ -26,6 +43,7 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
   const membersOnlineStatus = useCachedOnlineStatus(
     members.map((m) => m.userId)
   );
+  const isGroupOwner = useIsGroupOwner(props.groupId);
 
   const {
     searchText,
@@ -59,13 +77,50 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
     return <Skeleton />;
   }
 
-  const renderUser = (member: UserBaseInfo) => (
-    <UserListItem
-      key={member._id}
-      userId={member._id}
-      popover={<GroupUserPopover userInfo={member} />}
-    />
-  );
+  const renderUser = (member: UserBaseInfo) => {
+    const muteUntil = getMembersMuteUntil(members, member._id);
+
+    if (isGroupOwner && isDevelopment) {
+      return (
+        <Dropdown
+          key={member._id}
+          trigger={['contextMenu']}
+          overlay={
+            <Menu>
+              {muteUntil ? (
+                <Menu.Item>{t('解除禁言')}</Menu.Item>
+              ) : (
+                <Menu.SubMenu title={t('禁言')}>
+                  <Menu.Item>{t('1分钟')}</Menu.Item>
+                  <Menu.Item>{t('5分钟')}</Menu.Item>
+                  <Menu.Item>{t('10分钟')}</Menu.Item>
+                  <Menu.Item>{t('30分钟')}</Menu.Item>
+                  <Menu.Item>{t('1天')}</Menu.Item>
+                  <Menu.Item>{t('7天')}</Menu.Item>
+                  <Menu.Item>{t('30天')}</Menu.Item>
+                </Menu.SubMenu>
+              )}
+            </Menu>
+          }
+        >
+          <div>
+            <UserListItem
+              userId={member._id}
+              popover={<GroupUserPopover userInfo={member} />}
+            />
+          </div>
+        </Dropdown>
+      );
+    } else {
+      return (
+        <UserListItem
+          key={member._id}
+          userId={member._id}
+          popover={<GroupUserPopover userInfo={member} />}
+        />
+      );
+    }
+  };
 
   return (
     <div>

web/src/styles/antd/dark.less

@@ -120,7 +120,7 @@
   }
 
   // 下拉菜单
-  .ant-dropdown {
+  .ant-dropdown, .ant-dropdown-menu-submenu {
     color: rgba(255, 255, 255, 0.65);
 
     .ant-dropdown-menu {
@@ -131,7 +131,12 @@
         color: rgba(255, 255, 255, 0.65);
 
         &:hover {
+          color: rgba(255, 255, 255, 0.85);
           background-color: rgba(255, 255, 255, 0.08);
+
+          .ant-dropdown-menu-submenu-arrow-icon {
+            color: rgba(255, 255, 255, 0.85);
+          }
         }
 
         &.ant-dropdown-menu-item-danger {
@@ -142,6 +147,10 @@
             background-color: #a61d24;
           }
         }
+
+        .ant-dropdown-menu-submenu-arrow-icon {
+          color: rgba(255, 255, 255, 0.65);
+        }
       }
     }
   }