commit

src/api/chat.ts

@@ -6,3 +6,15 @@ export const chat_groupMemberList = (params) => $axios.post('/admin/openImGroupM
 
 export const chat_inviteUsetToGroup = (params) => $axios.post('/admin/openImInviteUserToGroup', params)
 export const chat_kickGroup = (params) => $axios.post('/admin/openImKickGroup', params)
+export const chat_muteGroupMember = (params) => $axios.post('/admin/openImMuteGroupMember', params)
+export const chat_cancelMuteGroupMember = (params) => $axios.post('/admin/openImCancelMuteGroupMember', params)
+
+export const chat_setGroupMemberInfo = (params) => $axios.post('/admin/openImSetGroupMemberInfo', params)
+export const chat_tansferGroupOwner = (params) => $axios.post('/admin/openImTransferGroup', params)
+
+export const chat_cancelMuteGroup = (params) => $axios.post('/admin/openImCancelMuteGroup', params)
+export const chat_muteGroup = (params) => $axios.post('/admin/openImMuteGroup', params)
+
+export const chat_dismissGroup = (params) => $axios.post('/admin/openImDismissGroup', params)
+export const chat_createGroup = (params) => $axios.post('/admin/openImCreateGroup', params)
+export const chat_changeGroup = (params) => $axios.post('/admin/openImSetGroupInfo', params)

src/components/MyTable/index.tsx

@@ -47,7 +47,9 @@ interface TableProps {
   expandedRowRender?: () => ReactNode;
   onExpand?: () => void;
   header?: JSX.Element;
-  disableKeys?: string[]
+  disableKeys?: string[];
+  selectionType?: 'checkbox' | 'radio',
+  selectKeys?: string[]
 }
 
 const MyTable: FC<TableProps> = forwardRef(
@@ -75,7 +77,9 @@ const MyTable: FC<TableProps> = forwardRef(
       expandedRowRender,
       onExpand,
       header,
-      disableKeys
+      disableKeys,
+      selectKeys = [],
+      selectionType = 'checkbox'
     } = props
 
     // 搜索参数,如果有特殊需要处理的参数，就处理
@@ -97,7 +101,7 @@ const MyTable: FC<TableProps> = forwardRef(
     }
 
     // 多选框的选择值
-    const [selectedKeys, setSelectedKeys] = useState([])
+    const [selectedKeys, setSelectedKeys] = useState(selectKeys)
     // 列表所有的筛选参数（包括搜索、分页、排序等）
     const [tableParams, setTableParams] = useState(initParams)
     // 列表搜索参数
@@ -186,6 +190,7 @@ const MyTable: FC<TableProps> = forwardRef(
     }
     // 复选框配置
     const rowSelection = {
+      type: selectionType,
       selectedRowKeys: selectedKeys,
       onChange: onSelectChange,
       getCheckboxProps: (record: any) => {
@@ -255,9 +260,12 @@ const MyTable: FC<TableProps> = forwardRef(
           ? searchForm.current.resetFields([...field])
           : searchForm.current.resetFields()
       },
-      getSelectedKeys(): CommonObjectType[] {
+      getSelectedKeys(): string[] {
         return selectedKeys
       },
+      setKeys(keys): void {
+        setSelectedKeys(keys)
+      },
       // 获取当前列表数据
       getTableData(): CommonObjectType[] {
         return tableData

src/components/SearchForm/index.tsx

@@ -21,6 +21,7 @@ const SearchForm: FC<SearchProps> = forwardRef(
             name={item.key}
             rules={item.rules}
             style={{ marginBottom: '6px' }}
+            label={item.label}
           >
             {item.slot}
           </Form.Item>

src/components/buzzup/BuzzFaceURL.tsx

@@ -7,7 +7,7 @@ interface BuzzFaceURLProps {
 }
 
 const BuzzFaceURL = (props: BuzzFaceURLProps) => {
-  const { faceUrl, name, size = 40 } = props
+  const { faceUrl, name, size = 35 } = props
 
   return faceUrl ? (
     <img src={faceUrl} alt="" style={{
@@ -17,7 +17,7 @@ const BuzzFaceURL = (props: BuzzFaceURLProps) => {
   ) : (
     <div style={{
       width: size, height: size, objectFit: 'cover', borderRadius: 5, background: '#FBBA5A', display: 'flex', justifyContent: 'center',
-      alignItems: 'center'
+      alignItems: 'center', color: '#000', fontWeight: 'bold'
     }}>
       {name.toLocaleUpperCase().substring(0, 1)}
     </div>

src/pages/chat/group-list/index.tsx

@@ -1,15 +1,141 @@
 
-import { chat_groupList, chat_userList } from "@/api/chat"
+import { chat_cancelMuteGroup, chat_changeGroup, chat_createGroup, chat_dismissGroup, chat_groupList, chat_muteGroup, chat_userList } from "@/api/chat"
 import BuzzFaceURL from "@/components/buzzup/BuzzFaceURL";
 import MyTable from "@/components/MyTable"
 import { getTime, isGender, isPlatformId } from "@/utils";
-import React from "react"
+import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
+import { Button, Drawer, Form, Input, Modal, notification, Popconfirm, Select, Upload } from "antd";
+import TextArea from "antd/lib/input/TextArea";
+import React, { useRef, useState } from "react"
 import { useLocation, useHistory } from "react-router-dom";
 
 
 const ChatGroupList = () => {
 
   const history = useHistory()
+  const tableRef = useRef(null)
+  const tableOwnerRef = useRef(null)
+  const tableAdminRef = useRef(null)
+  const tableMemberRef = useRef(null)
+
+  const [visible, setVisible] = useState(false)
+  const [visibleModal, setVisibleModal] = useState(false)
+  const [visibleModal1, setVisibleModal1] = useState(false)
+  const [visibleModal2, setVisibleModal2] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const groupOperate = useRef('' as 'c' | 'u')
+
+  const [form] = Form.useForm()
+
+  const muteGroup = async (item) => {
+    try {
+      const res: any = await chat_muteGroup({
+        groupID: item.groupInfo.groupID
+      })
+      if (res.code === 0) {
+        notification.success({
+          message: '全体禁言成功'
+        });
+        tableRef.current.update()
+      }
+    } catch (error) {
+
+    }
+  }
+
+  const cancelMuteGroup = async (item) => {
+    try {
+      const res: any = await chat_cancelMuteGroup({
+        groupID: item.groupInfo.groupID
+      })
+      if (res.code === 0) {
+        notification.success({
+          message: '解除禁言成功'
+        });
+        tableRef.current.update()
+      }
+    } catch (error) {
+
+    }
+  }
+
+  const dismissGroup = async (item) => {
+    try {
+      const res: any = await chat_dismissGroup({
+        groupID: item.groupInfo.groupID
+      })
+      if (res.code === 0) {
+        notification.success({
+          message: '解散群组成功'
+        });
+        tableRef.current.update()
+      }
+    } catch (error) {
+
+    }
+  }
+
+  const createGroup = async (values) => {
+    try {
+      const params = {
+        "adminUserIDs": values.adminUserIDs ? values.adminUserIDs.map(v => v.userID) : [],
+        "groupInfo": {
+          applyMemberFriend: values.applyMemberFriend,
+          groupName: values.groupName,
+          groupType: 2,
+          lookMemberInfo: values.lookMemberInfo,
+          needVerification: values.needVerification,
+          introduction: values.introduction || '',
+          notification: values.notification || ''
+        },
+        "memberUserIDs": values.memberUserIDs.map(v => v.userID),
+        "ownerUserID": values.ownerUserID[0].userID
+      }
+      setVisible(false)
+      form.resetFields()
+      const res: any = await chat_createGroup(params)
+      if (res.code === 0) {
+        notification.success({
+          message: '创建成功'
+        })
+        tableRef.current.update()
+      }
+    } catch (error) {
+
+    }
+  }
+
+  const changeGroup = async (values) => {
+    const { applyMemberFriend, groupID, groupName, introduction, lookMemberInfo, needVerification } = values
+    const params = { applyMemberFriend, groupID, groupName, introduction, lookMemberInfo, needVerification, notification: values.notification }
+    setVisible(false)
+    form.resetFields()
+    const res: any = await chat_changeGroup({ groupInfoForSet: params })
+    if (res.code === 0) {
+      notification.success({
+        message: '修改成功'
+      });
+      tableRef.current.update()
+    }
+  }
+
+  const onFinish = async (values) => {
+    if (groupOperate.current === 'c') {
+      createGroup(values)
+    } else {
+      changeGroup(values)
+    }
+  }
+
+  const openVisible = async (item) => {
+    setVisible(true);
+    groupOperate.current = 'u';
+    console.log(item);
+    form.setFieldsValue({
+      ...item.groupInfo
+    })
+  }
 
   const columns = [
     {
@@ -74,24 +200,246 @@ const ChatGroupList = () => {
     {
       title: 'options',
       fixed: 'right',
-      width: 250,
+      width: 280,
       render: (item) => (
         <div className="" style={{ display: 'flex' }}>
           <div style={{ fontSize: 12, color: '#1890ff', textWrap: 'nowrap', cursor: 'pointer' }} onClick={() => history.push(`/group-member?id=${item.groupInfo.groupID}`)}>群成员</div>
-          <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>群聊设置</div>
+          <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }} onClick={() => openVisible(item)}>群聊设置</div>
+          {item.groupInfo.status === 3 ? (
+            <Popconfirm title="确认全体解除禁言？" onConfirm={() => cancelMuteGroup(item)}>
+              <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>解除禁言</div>
+            </Popconfirm>
+          ) : <Popconfirm title="确认全体禁言？" onConfirm={() => muteGroup(item)}>
             <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>全体禁言</div>
+          </Popconfirm>}
+          <Popconfirm title="确认解散吗？" onConfirm={() => dismissGroup(item)}>
             <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>解散群组</div>
+          </Popconfirm>
         </div>
       )
     }
+  ]
 
+  const searchConfig = [
+    {
+      key: 'groupID',
+      label: '群组ID',
+      slot: <Input placeholder="请输入" />
+    },
+    {
+      key: 'groupName',
+      label: '群组名称',
+      slot: <Input placeholder="请输入" />
+    },
   ]
+
+  const userColumnData = [
+    {
+      title: '头像',
+      dataIndex: "",
+      width: 100,
+      render: (row) => (
+        <div>
+          <BuzzFaceURL size={30} faceUrl={row.faceURL} name={row.nickname} />
+        </div>
+      )
+    },
+    {
+      title: '用户昵称',
+      dataIndex: "nickname",
+      width: 200
+    },
+    {
+      title: '用户ID',
+      dataIndex: "userID",
+    },
+  ]
+
+  const handleDisableKeys = (type: 'adminUserIDs' | 'ownerUserID' | 'memberUserIDs') => {
+    let list = []
+    if (form.getFieldValue('adminUserIDs') && type !== 'adminUserIDs') {
+      list = list.concat(form.getFieldValue('adminUserIDs'))
+    }
+    if (form.getFieldValue('ownerUserID') && type !== 'ownerUserID') {
+      list = list.concat(form.getFieldValue('ownerUserID'))
+    }
+    if (form.getFieldValue('memberUserIDs') && type !== 'memberUserIDs') {
+      list = list.concat(form.getFieldValue('memberUserIDs'))
+    }
+    return list.map(v => v.userID)
+  }
+
+  const uploadButton = (
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </div>
+  );
+
   // 用户头像	用户昵称	用户ID	性别	手机号	在线状态	
   return (
+    <>
       <MyTable
+        header={
+          <Button type="primary" onClick={() => {
+            setVisible(true)
+            groupOperate.current = 'c'
+          }}>新建群组</Button>
+        }
+        searchConfigList={searchConfig}
+        ref={tableRef}
         apiFun={chat_groupList}
         columns={columns}
       />
+
+      {visibleModal && < Modal visible={visibleModal} onCancel={() => setVisibleModal(false)} title="选择群主" width={700} onOk={() => {
+        setVisibleModal(false)
+      }}>
+        <MyTable
+          ref={tableOwnerRef}
+          rowKey="userID"
+          onSelectRow={(_, row) => {
+            form.setFieldsValue({
+              ownerUserID: row
+            })
+          }}
+          apiFun={chat_userList}
+          columns={userColumnData}
+          selectionType="radio"
+          disableKeys={handleDisableKeys('ownerUserID')}
+          selectKeys={form.getFieldValue('ownerUserID') ? form.getFieldValue('ownerUserID').map(v => v.userID) : []}
+        />
+      </Modal >}
+
+      {visibleModal1 && < Modal visible={visibleModal1} onCancel={() => setVisibleModal1(false)} title="选择管理员" width={700} onOk={() => {
+        setVisibleModal1(false)
+      }}>
+        <MyTable
+          ref={tableAdminRef}
+          rowKey="userID"
+          onSelectRow={(_, row) => {
+            form.setFieldsValue({
+              adminUserIDs: row
+            })
+          }}
+          apiFun={chat_userList}
+          columns={userColumnData}
+          selectionType="checkbox"
+          disableKeys={handleDisableKeys('adminUserIDs')}
+          selectKeys={form.getFieldValue('adminUserIDs') ? form.getFieldValue('adminUserIDs').map(v => v.userID) : []}
+        />
+      </Modal >}
+
+
+      {visibleModal2 && < Modal visible={visibleModal2} onCancel={() => setVisibleModal2(false)} title="选择群员" width={700} onOk={() => {
+        setVisibleModal2(false)
+      }}>
+        <MyTable
+          ref={tableMemberRef}
+          rowKey="userID"
+          onSelectRow={(_, row) => {
+            form.setFieldsValue({
+              memberUserIDs: row
+            })
+          }}
+          apiFun={chat_userList}
+          columns={userColumnData}
+          selectionType="checkbox"
+          disableKeys={handleDisableKeys('memberUserIDs')}
+          selectKeys={form.getFieldValue('memberUserIDs') ? form.getFieldValue('memberUserIDs').map(v => v.userID) : []}
+        />
+      </Modal >}
+
+      <Drawer title="新建群组" width={450} visible={visible} onClose={() => {
+        setVisible(false)
+        form.resetFields()
+      }}>
+        <Form form={form} onFinish={onFinish}>
+          <Form.Item name="faceURL">
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <Upload
+                name="avatar"
+                listType="picture-card"
+                className="avatar-uploader"
+                showUploadList={false}
+                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+              >
+                {form.getFieldValue('faceURL') ? <img src={form.getFieldValue('faceURL')} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
+              </Upload>
+            </div>
+          </Form.Item>
+          <Form.Item label="群组名称" rules={[{ required: true, message: '请输入' }]} name="groupName">
+            <Input placeholder="请输入" />
+          </Form.Item>
+          {groupOperate.current === 'c' && <>
+            <Form.Item label="群主" rules={[{ required: true, message: '请选择' }]} name="ownerUserID">
+              <div style={{ width: '100%', height: 30, border: '1px solid #434343', cursor: 'pointer', display: 'flex', alignItems: 'center' }} onClick={() => setVisibleModal(true)}>
+                {
+                  form.getFieldValue('ownerUserID') && form.getFieldValue('ownerUserID').length > 0 && (
+                    <div style={{ fontSize: 10, backgroundColor: '#434343', borderRadius: 2, marginLeft: 10, padding: 1 }}>{form.getFieldValue('ownerUserID')[0].nickname}</div>
+                  )
+                }
+              </div>
+            </Form.Item>
+            <Form.Item label="管理员" name="adminUserIDs">
+              <div style={{ width: '290px', height: 30, border: '1px solid #434343', cursor: 'pointer', overflow: 'hidden', display: 'flex', alignItems: 'center' }} onClick={() => setVisibleModal1(true)}>
+                {
+                  form.getFieldValue('adminUserIDs') && form.getFieldValue('adminUserIDs').length > 0 && form.getFieldValue('adminUserIDs').map(item => (
+                    <div key={item.userID} style={{ fontSize: 10, backgroundColor: '#434343', borderRadius: 2, marginLeft: 10, padding: 1 }}>{item.nickname}</div>
+                  ))
+                }
+              </div>
+            </Form.Item>
+            <Form.Item label="群成员" rules={[{ required: true, message: '请选择' }]} name="memberUserIDs">
+              <div style={{ width: '280px', height: 30, border: '1px solid #434343', cursor: 'pointer', overflow: 'hidden', display: 'flex', alignItems: 'center' }} onClick={() => setVisibleModal2(true)}>
+                {
+                  form.getFieldValue('memberUserIDs') && form.getFieldValue('memberUserIDs').length > 0 && form.getFieldValue('memberUserIDs').map(item => (
+                    <div key={item.userID} style={{ fontSize: 10, backgroundColor: '#434343', borderRadius: 2, marginLeft: 10, padding: 1 }}>{item.nickname}</div>
+                  ))
+                }
+              </div>
+            </Form.Item>
+          </>}
+          {
+            groupOperate.current === 'u' && (
+              <Form.Item label='群组ID' name="groupID">
+                <Input disabled />
+              </Form.Item>
+            )
+          }
+          <Form.Item label="群验证" name="needVerification" initialValue={2}>
+            <Select options={[
+              { label: '群成员邀请无需验证', value: 0 },
+              { label: '需要发送验证消息', value: 1 },
+              { label: '允许所有人加群', value: 2 },
+            ]} />
+          </Form.Item>
+          <Form.Item label="添加好友" name="applyMemberFriend" initialValue={1}>
+            <Select options={[
+              { label: '允许群内添加好友', value: 0 },
+              { label: '不允许群内添加好友', value: 1 },
+            ]} />
+          </Form.Item>
+          <Form.Item label="查看资料" name="lookMemberInfo" initialValue={1}>
+            <Select options={[
+              { label: '允许查看群员资料', value: 0 },
+              { label: '不允许查看群员资料', value: 1 },
+            ]} />
+          </Form.Item>
+          <Form.Item label="群公告" name="notification">
+            <TextArea />
+          </Form.Item>
+          <Form.Item label="群简介" name="introduction">
+            <TextArea />
+          </Form.Item>
+          <Form.Item >
+            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+              <Button type="primary" htmlType="submit">确认</Button>
+            </div>
+          </Form.Item>
+        </Form>
+      </Drawer>
+    </>
   )
 }
 

src/pages/chat/group-member/index.tsx

@@ -1,11 +1,24 @@
-import { chat_groupMemberList, chat_inviteUsetToGroup, chat_userList } from "@/api/chat";
+import { chat_cancelMuteGroupMember, chat_groupMemberList, chat_inviteUsetToGroup, chat_kickGroup, chat_muteGroupMember, chat_setGroupMemberInfo, chat_tansferGroupOwner, chat_userList } from "@/api/chat";
 import BuzzFaceURL from "@/components/buzzup/BuzzFaceURL";
 import MyTable from "@/components/MyTable";
 import { getTime, GRole, isPlatformId, joinGR } from "@/utils";
-import { Button, Modal, notification } from "antd";
+import { Button, Divider, Drawer, Form, Input, Modal, notification, Popconfirm, Radio, Space } from "antd";
 import React, { useRef, useState } from "react"
 import { useParams, useHistory } from "react-router-dom"
 
+const mute_times = {
+  1: 60 * 10,
+  2: 60 * 60,
+  3: 60 * 60 * 12,
+  4: 60 * 60 * 24
+}
+
+const roleIndex = {
+  20: 1,
+  60: 2,
+  100: 3
+}
+
 const GroupMember = () => {
 
   const hash = window.location.hash
@@ -14,8 +27,103 @@ const GroupMember = () => {
 
   const tableUserRef = useRef(null)
   const tableMemberRef = useRef(null)
+  const inputRef = useRef(null)
+  const currentUserRef = useRef({} as any)
 
   const [visible, setVisible] = useState(false)
+  const [visibleDrawer, setVisibleDrawer] = useState(false)
+  const [selectValue, setSelectValue] = useState(1)
+
+  const [visibleDrawerRole, setVisibleDrawerRole] = useState(false)
+  const [selectRoleValue, setSelectRoleValue] = useState(1)
+
+  const removeUser = async (item) => {
+    try {
+      const res: any = await chat_kickGroup({
+        "groupID": queryParams.get("id"),
+        "kickedUserIDs": [item.userID],
+        "reason": ""
+      })
+      if (res.code === 0) {
+        tableMemberRef.current.update()
+        notification.success({
+          message: '移除成功'
+        })
+      }
+    } catch (error) {
+
+    }
+  }
+
+  const muteGroupMember = async () => {
+    try {
+      const muteSeconds = mute_times[selectValue] ? mute_times[selectValue] : Number(inputRef.current.state.value);
+      if (!muteSeconds) return notification.error({ message: '请输入禁言时长' })
+      setVisibleDrawer(false)
+      const res: any = await chat_muteGroupMember({
+        "groupID": queryParams.get("id"),
+        userID: currentUserRef.current.userID,
+        mutedSeconds: muteSeconds
+      })
+
+      if (res.code === 0) {
+        notification.success({
+          message: '禁言成功'
+        })
+        tableMemberRef.current.update()
+      }
+    } catch (error) {
+
+    }
+  }
+
+  const cancelMute = async (item) => {
+    try {
+      const res: any = await chat_cancelMuteGroupMember({
+        groupID: queryParams.get('id'),
+        userID: item.userID
+      })
+      if (res.code === 0) {
+        notification.success({
+          message: '解除禁言成功'
+        })
+        tableMemberRef.current.update()
+      }
+    } catch (error) {
+
+    }
+  }
+
+  const setRole = async () => {
+    try {
+      const roleLv = selectRoleValue == 2 ? 60 : 20;
+      let res: any;
+      setVisibleDrawerRole(false)
+      if (selectRoleValue <= 2) {
+        res = await chat_setGroupMemberInfo({
+          members: [{
+            ...currentUserRef.current,
+            roleLevel: roleLv
+          }]
+        })
+      } else {
+        const item = tableMemberRef.current.getTableData().find(v => v.roleLevel === 100)
+        res = await chat_tansferGroupOwner({
+          "groupID": queryParams.get('id'),
+          "newOwnerUserID": currentUserRef.current.userID,
+          "oldOwnerUserID": item.userID
+        })
+      }
+      if (res.code === 0) {
+        notification.success({
+          message: '设置成功'
+        })
+        tableMemberRef.current.update()
+      }
+    } catch (error) {
+
+    }
+  }
 
   const columns = [
     {
@@ -33,6 +141,11 @@ const GroupMember = () => {
       dataIndex: "userID",
       width: 150
     },
+    {
+      title: 'BuzzUp ID',
+      dataIndex: "publicKey",
+      width: 150
+    },
     {
       title: '群员角色',
       dataIndex: "roleLevel",
@@ -61,9 +174,25 @@ const GroupMember = () => {
       width: 200,
       render: (item) => (
         <div className="" style={{ display: 'flex' }}>
-          <div style={{ fontSize: 12, color: '#1890ff', textWrap: 'nowrap', cursor: 'pointer' }} >设置群身份</div>
-          <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>禁言</div>
+          <div style={{ fontSize: 12, color: '#1890ff', textWrap: 'nowrap', cursor: 'pointer' }} onClick={() => {
+            currentUserRef.current = item
+            setSelectRoleValue(roleIndex[item.roleLevel])
+            setVisibleDrawerRole(true)
+          }}>设置群身份</div>
+          {Date.now() >= item.muteEndTime ? <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }} onClick={() => {
+            currentUserRef.current = item
+            setVisibleDrawer(true)
+          }}>禁言</div> : (
+            <Popconfirm title="确认解除？" onConfirm={() => cancelMute(item)}>
+              <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>解除禁言</div>
+            </Popconfirm>
+          )}
+          <Popconfirm
+            title="确认移除？"
+            onConfirm={() => removeUser(item)}
+          >
             <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>移除</div>
+          </Popconfirm>
         </div>
       )
     }
@@ -107,9 +236,18 @@ const GroupMember = () => {
     }
   }
 
+
+  const searchConfigList = [
+    {
+      key: 'keyword',
+      slot: <Input placeholder='用户ID' style={{ width: 200 }} />,
+    }
+  ]
+
   return (
     <>
       <MyTable
+        searchConfigList={searchConfigList}
         header={
           <div style={{ marginBottom: 15, display: 'flex', justifyContent: 'flex-end' }}>
             <Button type="primary" onClick={() => setVisible(true)}>添加群成员</Button>
@@ -131,6 +269,35 @@ const GroupMember = () => {
           disableKeys={tableMemberRef.current && tableMemberRef.current.getTableData().map(v => v.userID)}
         />
       </Modal>}
+
+      <Drawer title="禁言" width="40%" visible={visibleDrawer} onClose={() => setVisibleDrawer(false)}>
+        <Radio.Group value={selectValue} onChange={e => setSelectValue(e.target.value)}>
+          <Space direction="vertical">
+            <Radio value={1}>10分钟</Radio>
+            <Radio value={2}>1小时</Radio>
+            <Radio value={3}>12小时</Radio>
+            <Radio value={4}>一天</Radio>
+            <Radio value={5}>自定义时长(ss)</Radio>
+          </Space>
+        </Radio.Group>
+        {selectValue === 5 && <Input ref={inputRef} type="number" style={{ marginTop: 5 }} placeholder="输入自定义时长(ss)" />}
+        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'flex-end' }}>
+          <Button type="primary" onClick={muteGroupMember}>确认</Button>
+        </div>
+      </Drawer>
+
+      <Drawer title="设置群身份" width="30%" visible={visibleDrawerRole} onClose={() => setVisibleDrawerRole(false)}>
+        <Radio.Group value={selectRoleValue} onChange={e => setSelectRoleValue(e.target.value)}>
+          <Space direction="vertical">
+            <Radio value={1}>普通成员</Radio>
+            <Radio value={2}>群管理员</Radio>
+            <Radio value={3}>群主</Radio>
+          </Space>
+          <div style={{ marginTop: 40 }}>
+            <Button type="primary" onClick={setRole}>确认</Button>
+          </div>
+        </Radio.Group>
+      </Drawer>
     </>
   )
 }