添加群聊

src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage-member.vue

@@ -3,23 +3,12 @@
     <ul class="list">
       <li class="list-item" v-for="(item, index) in list" :key="index">
         <!-- @click="handleMemberProfileShow(item)" -->
-        <aside >
-          <img
-            class="avatar"
-            :src="
-              item?.avatar ||
-              'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-            "
-            onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-          />
-          <span class="name">{{ item?.nick || item?.userID }}</span>
+        <aside>
+          <img class="avatar" :src="item?.avatar || 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'" onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'" />
+          <span class="name">{{ item?.nickname || item?.userID }}</span>
           <span>{{ handleRoleName(item) }}</span>
         </aside>
-        <i
-          v-if="item.role !== 'Owner' && isShowDel"
-          class="icon icon-del"
-          @click="submit(item)"
-        ></i>
+        <i v-if="item.role !== 'Owner' && isShowDel" class="icon icon-del" @click="submit(item)"></i>
       </li>
       <li class="list-item" v-if="list.length < total" @click="getMore">
         {{ $t(`TUIChat.manage.查看更多`) }}
@@ -29,28 +18,28 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
-import TIM from '@tencentcloud/chat';
+import { defineComponent, watchEffect, reactive, toRefs } from "vue";
+import TIM from "@tencentcloud/chat";
 
 const ManageMember = defineComponent({
   components: {},
   props: {
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     total: {
       type: Number,
-      default: () => 0
+      default: () => 0,
     },
     isShowDel: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     self: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   setup(props: any, ctx: any) {
     const types: any = TIM.TYPES;
@@ -58,7 +47,7 @@ const ManageMember = defineComponent({
       total: 0,
       list: [],
       isShowDel: false,
-      self: {}
+      self: {},
     });
 
     watchEffect(() => {
@@ -70,34 +59,35 @@ const ManageMember = defineComponent({
 
     const handleRoleName = (item: any) => {
       const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
-      let name = '';
-      switch (item?.role) {
-        case types.GRP_MBR_ROLE_ADMIN:
-          name = t('TUIChat.manage.管理员');
+      let name = "";
+      console.log(item, data.self, "self");
+      switch (item?.groupRoleType) {
+        case "Admin":
+          name = t("TUIChat.manage.管理员");
           break;
-        case types.GRP_MBR_ROLE_OWNER:
-          name = t('TUIChat.manage.群主');
+        case "Owner":
+          name = t("TUIChat.manage.群主");
           break;
       }
       if (name) {
         name = `(${name})`;
       }
-      if (item.userID === data.self.userID) {
-        name += ` (${t('TUIChat.manage.我')})`;
+      if (item.imUserId === data.self.userID) {
+        name += ` (${t("TUIChat.manage.我")})`;
       }
       return name;
     };
 
     const getMore = () => {
-      ctx.emit('more');
+      ctx.emit("more");
     };
 
     const submit = (item: any) => {
-      ctx.emit('del', [item]);
+      ctx.emit("del", [item]);
     };
 
     const handleMemberProfileShow = (user: any) => {
-      ctx.emit('handleMemberProfileShow', user);
+      ctx.emit("handleMemberProfileShow", user);
     };
 
     return {
@@ -105,16 +95,16 @@ const ManageMember = defineComponent({
       getMore,
       submit,
       handleRoleName,
-      handleMemberProfileShow
+      handleMemberProfileShow,
     };
-  }
+  },
 });
 export default ManageMember;
 </script>
 
 <style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
+@import url("../../../styles/common.scss");
+@import url("../../../styles/icon.scss");
 .member {
   flex: 1;
   background: #ffffff;
@@ -122,14 +112,14 @@ export default ManageMember;
     display: flex;
     flex-direction: column;
     background: #f4f5f9;
-    padding-top: 12Px;
+    padding-top: 12px;
     &-item {
-      padding: 13Px;
+      padding: 13px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: #ffffff;
-      font-size: 14Px;
+      font-size: 14px;
       overflow: hidden;
       &:hover {
         background: #f1f2f6;
@@ -140,9 +130,9 @@ export default ManageMember;
         width: 100%;
         overflow: hidden;
         .name {
-          padding-left: 8Px;
+          padding-left: 8px;
           font-weight: 400;
-          font-size: 14Px;
+          font-size: 14px;
           color: #000000;
           flex: 1;
           overflow: hidden;
@@ -154,8 +144,8 @@ export default ManageMember;
   }
 }
 .avatar {
-  width: 36Px;
-  height: 36Px;
-  border-radius: 4Px;
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
 }
 </style>

src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage.vue

@@ -20,7 +20,7 @@
           <header class="userInfo-header" @click="setTab('member')">
             <label>{{ $t(`TUIChat.manage.群成员`) }}</label>
             <p>
-              <span> {{ conversation.groupProfile.memberCount }}{{ $t(`TUIChat.manage.人`) }} </span>
+              <span> {{ groupDetail.memberNum || 0 }}{{ $t(`TUIChat.manage.人`) }} </span>
               <i class="icon icon-right"></i>
             </p>
           </header>
@@ -30,14 +30,15 @@
               <dt>
                 <img class="avatar" :src="item?.avatar || 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'" onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'" />
               </dt>
-              <dd>{{ item?.nick || item?.userID }}</dd>
+              <dd>{{ item?.nickname || item?.userID }}</dd>
             </dl>
-            <dl v-if="isShowAddMember">
+            <!-- v-if="isShowAddMember" -->
+            <dl v-if="currentUserDetail.groupRoleType === 'Owner'">
               <dt class="avatar" @click="toggleMask('add')">+</dt>
             </dl>
-            <dl v-if="conversation.groupProfile.selfInfo.role === 'Owner'">
+            <!-- <dl v-if="conversation.groupProfile.selfInfo.role === 'Owner'">
               <dt class="avatar" @click="toggleMask('remove')">-</dt>
-            </dl>
+            </dl> -->
           </ol>
         </div>
         <ul class="content space-top" @click="editLableName = ''" style="background-color: #fff">
@@ -95,28 +96,21 @@
             </span>
           </li> -->
         </ul>
+
+        <div v-if="currentUserDetail.groupRoleType === 'Owner'" class="admin-content space-top" style="background-color: #fff; padding-top: 12px">
+          <aside>
+            <label>学生禁言</label>
+          </aside>
+          <Slider :open="groupDetail.configJson.mute" @change="setAllMuteTime" />
+        </div>
         <ul class="footer space-top">
-          <!-- <li v-if="conversation.groupProfile.selfInfo.role === 'Owner' && userInfo?.list.length > 1" @click.stop="toggleMask('changeOwner')">
-            {{ $t(`TUIChat.manage.转让群组`) }}
-          </li> -->
-          <!-- <li v-if="!!isDismissGroupAuth" @click.stop="dismiss(conversation.groupProfile)">
-            {{ $t(`TUIChat.manage.解散群聊`) }}
-          </li> -->
-          <!-- <li v-else @click.stop="quit(conversation.groupProfile)">
-            {{ $t(`TUIChat.manage.退出群组`) }}
-          </li> -->
+          <li v-if="currentUserDetail.groupRoleType === 'Owner' && userInfo?.list.length > 1" @click.stop="toggleMask('changeOwner')">移交群主</li>
+          <li v-if="currentUserDetail.groupRoleType === 'Owner'" @click.stop="dismiss(conversation.groupProfile)">解散群聊</li>
+          <li v-else @click.stop="quit(conversation.groupProfile)">退出群组</li>
         </ul>
       </main>
-      <ManageMember
-        v-else-if="currentTab === 'member'"
-        :self="conversation.groupProfile.selfInfo"
-        :list="userInfo.list"
-        :total="~~conversation.groupProfile.memberCount"
-        :isShowDel="conversation.groupProfile.selfInfo.role === 'Owner'"
-        @more="getMember('more')"
-        @del="submit"
-        @handleMemberProfileShow="handleMemberProfileShow"
-      />
+      <ManageMember v-else-if="currentTab === 'member'" :self="conversation.groupProfile.selfInfo" :list="userInfo.list" :total="~~conversation.groupProfile.memberCount" @more="getMember('more')" @del="submit" @handleMemberProfileShow="handleMemberProfileShow" />
+      <!-- :isShowDel="conversation.groupProfile.selfInfo.role === 'Owner'" -->
       <MemeberProfile v-else-if="currentTab === 'profile'" :userInfo="currentMember" />
       <ManageNotification v-else-if="currentTab === 'notification'" :isAuth="isAuth" :data="conversation.groupProfile" @update="updateProfile" />
       <main class="admin" v-else-if="currentTab === 'admin'">
@@ -175,12 +169,20 @@
           {{ $t(`TUIChat.manage.确定从群聊中删除所选成员？`) }}
         </p>
       </DialogTUI>
+
+      <DialogTUI title="退出群聊" :show="quitDialogShow" :isH5="isH5" :center="true" :isHeaderShow="!isH5" @submit="handleManage([], 'quit')" @update:show="(e) => (quitDialogShow = e)">
+        <p class="delDialog-title">是否退出群聊？</p>
+      </DialogTUI>
+      <DialogTUI title="解散群聊" :show="dimmisDialogShow" :isH5="isH5" :center="true" :isHeaderShow="!isH5" @submit="handleManage([], 'dismiss')" @update:show="(e) => (dimmisDialogShow = e)">
+        <p class="delDialog-title">是否解散群聊？</p>
+      </DialogTUI>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs, computed, watch, ref } from "vue";
+import TUIMessage from "../../../components/messageTUI/index";
+import { defineComponent, watchEffect, reactive, toRefs, computed, watch, ref, onMounted } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import MaskTUI from "../../../components/maskTUI/mask.vue";
 import Transfer from "../../../components/transferTUI/index.vue";
@@ -190,7 +192,7 @@ import ManageNotification from "./manage-notification.vue";
 import ManageMember from "./manage-member.vue";
 import MemeberProfile from "./member-profile.vue";
 import DialogTUI from "../../../components/dialogTUi/index.vue";
-import { imGroupChangeGroupOwner } from "../../../../api";
+import { imGroupChangeGroupOwner, imGroupDetail, imGroupDismiss, imGroupMemberPage, imGroupMemberSaveImAll, imGroupMemberUserDetail, imGroupMuteAll, imGroupQuit, imUserFriendPage } from "../../../../api";
 import Vuex from "vuex";
 import { handleErrorPrompts } from "../../utils";
 import useClipboard from "vue-clipboard3";
@@ -229,6 +231,7 @@ const manage = defineComponent({
   },
   setup(props: any, ctx: any) {
     const types: any = manage.TUIServer.TUICore.TIM.TYPES;
+
     const { GroupServer } = manage;
     const { t } = manage.TUIServer.TUICore.config.i18n.useI18n();
     const data: any = reactive({
@@ -258,6 +261,8 @@ const manage = defineComponent({
         [types.JOIN_OPTIONS_DISABLE_APPLY]: "禁止加群",
       },
       delDialogShow: false,
+      quitDialogShow: false,
+      dimmisDialogShow: false,
       userList: [],
       transferTitle: "",
       member: {
@@ -266,6 +271,10 @@ const manage = defineComponent({
         muteMember: [],
       },
       currentMember: {},
+      classGroupDetail: {}, // 群详情
+      page: 1, // 当前默认查询第一页数据
+      currentUserDetail: {} as any, // 用户信息
+      groupDetail: {} as any,
     });
 
     const dialog: any = ref();
@@ -305,12 +314,15 @@ const manage = defineComponent({
           member: [],
           muteMember: [],
         };
+        // TIM.TYPES.GRP_MBR_ROLE_ADMIN（群管理员）,
+        // TIM.TYPES.GRP_MBR_ROLE_MEMBER（群普通成员）,
+        // TIM.TYPES.GRP_MBR_ROLE_CUSTOM（自定义群成员角色，仅社群支持）
         newValue.map((item: any) => {
-          switch (item?.role) {
-            case types.GRP_MBR_ROLE_ADMIN:
+          switch (item?.groupRoleType) {
+            case "Admin":
               data.member.admin.push(item);
               break;
-            case types.GRP_MBR_ROLE_MEMBER:
+            case "Member":
               data.member.member.push(item);
               break;
             default:
@@ -393,30 +405,57 @@ const manage = defineComponent({
       return true;
     });
 
-    const getMember = (type?: string) => {
-      const { conversation } = data;
-      const options: any = {
-        groupID: conversation?.groupProfile?.groupID,
-        count: 100,
-        offset: type && type === "more" ? data.userInfo.list.length : 0,
-      };
-      GroupServer.getGroupMemberList(options).then((res: any) => {
-        if (type && type === "more") {
-          data.userInfo.list = [...data.userInfo.list, ...res.data.memberList];
-        } else {
-          data.userInfo.list = res.data.memberList;
-        }
-      });
+    const getMember = async (type?: string) => {
+      try {
+        const { conversation } = data;
+        // console.log(conversation, "getMember -------");
+        const options: any = {
+          groupId: conversation?.groupProfile?.groupID,
+          rows: 100,
+          page: type && type === "more" ? data.page + 1 : data.page,
+          // offset: type && type === "more" ? data.userInfo.list.length : 0,
+        };
+        await imGroupMemberPage(options).then((res: any) => {
+          const rows = res.data.rows || [];
+          rows.forEach((row: any) => {
+            row.nick = row.nickname;
+          });
+          if (type && type === "more") {
+            data.userInfo.list = [...data.userInfo.list, ...rows];
+          } else {
+            data.userInfo.list = rows;
+          }
+        });
+        // GroupServer.getGroupMemberList(options)
+      } catch {
+        //
+      }
     };
 
     const addMember = async (userIDList: any) => {
       const { conversation } = data;
-      const options: any = {
-        groupID: conversation.groupProfile.groupID,
-        userIDList,
-      };
-      await GroupServer.addGroupMember(options);
-      getMember("More");
+      // const options: any = {
+      //   groupID: conversation.groupProfile.groupID,
+      //   userIDList,
+      // };
+      // await GroupServer.addGroupMember(options);
+      const params: any = [];
+      userIDList.forEach((id: any) => {
+        params.push({
+          groupId: conversation.groupProfile.groupID,
+          imUserId: id,
+        });
+      });
+      // console.log(params, userIDList, "userIDList");
+      // return;
+      try {
+        await imGroupMemberSaveImAll(params);
+
+        getGroupDetail();
+        getMember();
+      } catch {
+        //
+      }
     };
 
     const deleteMember = (user: any) => {
@@ -429,31 +468,43 @@ const manage = defineComponent({
     };
 
     const changeOwner = async (userID: any) => {
-      const options: any = {
-        groupID: data.conversation.groupProfile.groupID,
-        newOwnerID: userID,
-      };
-      const imResponse = await GroupServer.changeGroupOwner(options);
-      data.conversation.groupProfile = {};
-      data.conversation.groupProfile = imResponse.data.group;
-
+      // const options: any = {
+      //   groupID: data.conversation.groupProfile.groupID,
+      //   newOwnerID: userID,
+      // };
+      // const imResponse = await GroupServer.changeGroupOwner(options);
+
+      // data.conversation.groupProfile = imResponse.data.group;
+      console.log(data.conversation.groupProfile, userID);
       // 腾讯IM切换人之后
       await imGroupChangeGroupOwner({
         oldOwner: data.conversation.groupProfile.ownerID,
         groupId: data.conversation.groupProfile.groupID,
         newOwner: userID,
       });
+      toggleShow();
+      data.conversation.groupProfile = {};
+
+      TUIMessage({
+        message: "转交成功",
+        isH5: false,
+        type: "success",
+      });
     };
 
     const quit = async (group: any) => {
-      await GroupServer.quitGroup(group.groupID);
-      manage.TUIServer.store.conversation = {};
+      data.quitDialogShow = true;
     };
 
     const dismiss = async (group: any) => {
-      await GroupServer.dismissGroup(group.groupID);
-      manage.TUIServer.store.conversation = {};
-      (window as any)?.TUIKitTUICore?.isOfficial && VuexStore?.commit && VuexStore?.commit("handleTask", 5);
+      data.dimmisDialogShow = true;
+      // console.log(manage.TUIServer.deleteConversation, "manage.TUIServer");
+      //       manage.TUIServer.deleteConversation(data.conversation.conversationID);
+      //       manage.TUIServer.store.conversation = {};
+      //       toggleShow();
+      // await GroupServer.dismissGroup(group.groupID);
+      // manage.TUIServer.store.conversation = {};
+      // (window as any)?.TUIKitTUICore?.isOfficial && VuexStore?.commit && VuexStore?.commit("handleTask", 5);
     };
 
     const handleAdmin = async (user: any) => {
@@ -584,6 +635,7 @@ const manage = defineComponent({
     };
 
     const submit = (userList: any) => {
+      console.log(userList, data.transferType, " data.transferType");
       if (data.transferType === "remove") {
         data.userList = userList;
         data.delDialogShow = !data.delDialogShow;
@@ -594,9 +646,13 @@ const manage = defineComponent({
     };
 
     const friendList = async () => {
-      const imResponse = await manage.TUIServer.getFriendList();
-      const friendList = imResponse.data.map((item: any) => item?.profile);
-      return friendList.filter((item: any) => !data.userInfo.list.some((infoItem: any) => infoItem.userID === item.userID));
+      const list = await imUserFriendPage({ page: 1, rows: 999 });
+      console.log(list, "lits");
+      const fristList = list.data.rows || [];
+      fristList.forEach((item: any) => {
+        item.nick = item.friendNickname;
+      });
+      return fristList.filter((item: any) => !data.userInfo.list.some((infoItem: any) => infoItem.imUserId === item.imUserId));
     };
 
     const cancel = () => {
@@ -632,12 +688,7 @@ const manage = defineComponent({
           break;
         case "changeOwner":
           data.isRadio = true;
-          const tempList: any = [...data.member.admin, ...data.member.member];
-          tempList.forEach((item: any) => {
-            if (item.userID.indexOf("STUDENT") == -1) {
-              data.transferList.push(item);
-            }
-          });
+          data.transferList = [...data.member.admin, ...data.member.member];
           data.transferTitle = "转让群组";
           console.log(data.transferList, "data.transferList");
           break;
@@ -679,15 +730,26 @@ const manage = defineComponent({
       }
     };
 
-    const setAllMuteTime = (value: boolean) => {
-      updateProfile({ key: "muteAllMembers", value });
-      (window as any)?.TUIKitTUICore?.isOfficial && VuexStore?.commit && VuexStore?.commit("handleTask", 4);
+    // 禁言
+    const setAllMuteTime = async (value: boolean) => {
+      // updateProfile({ key: "muteAllMembers", value });
+      // (window as any)?.TUIKitTUICore?.isOfficial && VuexStore?.commit && VuexStore?.commit("handleTask", 4);
+      try {
+        await imGroupMuteAll({
+          groupId: data.conversation.groupProfile.groupID,
+          muteAll: value,
+        });
+
+        getGroupDetail();
+      } catch {
+        //
+      }
     };
 
     const handleManage = (userList: any, type: any) => {
       const userIDList: any = [];
       userList.map((item: any) => {
-        userIDList.push(item.userID);
+        userIDList.push(item.imUserId);
         return item;
       });
       switch (type) {
@@ -712,6 +774,35 @@ const manage = defineComponent({
         case "removeMute":
           setMemberMuteTime(userIDList[0], "remove");
           break;
+        case "quit":
+          // 退出群聊
+          imGroupQuit({
+            id: data.conversation.groupProfile.groupID,
+          }).then(() => {
+            manage.TUIServer.deleteConversation(data.conversation.conversationID);
+            manage.TUIServer.store.conversation = {};
+            toggleShow();
+          });
+          break;
+        case "dismiss":
+          // 解散群
+          imGroupDismiss({
+            id: data.conversation.groupProfile.groupID,
+          })
+            .then(() => {
+              manage.TUIServer.deleteConversation(data.conversation.conversationID);
+              manage.TUIServer.store.conversation = {};
+              toggleShow();
+            })
+            .catch((err: any) => {
+              // console.log(err, err.message, "1212");
+              TUIMessage({
+                message: err.message,
+                isH5: false,
+                type: "error",
+              });
+            });
+          break;
         default:
           break;
       }
@@ -731,6 +822,56 @@ const manage = defineComponent({
       setTab("profile");
     };
 
+    const getGroupMemberUserDetail = async () => {
+      try {
+        const res = await imGroupMemberUserDetail({
+          groupId: data?.conversation?.groupProfile?.groupID,
+          imUserId: data?.conversation?.groupProfile?.selfInfo.userID,
+        });
+
+        data.currentUserDetail = res.data;
+      } catch {
+        //
+      }
+    };
+
+    /** 获取群详情 */
+    const getGroupDetail = async () => {
+      try {
+        const res = await imGroupDetail({ id: data?.conversation?.groupProfile?.groupID });
+        const tdata = res.data;
+        tdata.configJson = tdata.configJson ? JSON.parse(tdata.configJson) : {};
+        data.groupDetail = tdata;
+      } catch {
+        //
+      }
+    };
+
+    watch(
+      () => data.show,
+      () => {
+        if (data.show) {
+          try {
+            getGroupDetail();
+            getGroupMemberUserDetail();
+          } catch {
+            //
+          }
+        }
+      }
+    );
+
+    onMounted(() => {
+      try {
+        getGroupDetail();
+        getGroupMemberUserDetail();
+        console.log(data?.conversation, "data?.conversation?");
+        // console.log(data.userInfo.list, "data.userInfo.list");
+      } catch {
+        //
+      }
+    });
+
     return {
       ...toRefs(data),
       isDismissGroupAuth,

src/TUIKit/TUIComponents/container/TUIChat/manage-components/style/web.scss

@@ -154,8 +154,12 @@
         cursor: pointer;
         width: 100%;
         font-size: 14Px;
-        padding: 14Px 0;
+        padding: 11Px 0;
         text-align: center;
+        background: #198CFE;
+        border-radius: 8px;
+        color: #fff;
+        margin-bottom: 12px;
 
         &:last-child {
           border: none;

src/TUIKit/TUIComponents/container/TUIChat/message-input/index.vue

@@ -15,33 +15,23 @@
       @onTyping="onTyping"
     ></MessageInputEditor>
     <MessageInputButton :isH5="isH5" @sendMessage="sendMessage" v-if="!isMute"></MessageInputButton>
-    <MessageInputAt
-      :memberList="memberList"
-      :isGroup="isGroup"
-      :selfInfo="conversation?.groupProfile?.selfInfo"
-      :isH5="isH5"
-      v-if="enableAt"
-    ></MessageInputAt>
-    <MessageInputReferenceOrReply
-      :replyOrReference="replyOrReference"
-      :isH5="isH5"
-      @resetReplyOrReference="resetReplyOrReference"
-    ></MessageInputReferenceOrReply>
+    <MessageInputAt :memberList="memberList" :isGroup="isGroup" :selfInfo="conversation?.groupProfile?.selfInfo" :isH5="isH5" v-if="enableAt"></MessageInputAt>
+    <MessageInputReferenceOrReply :replyOrReference="replyOrReference" :isH5="isH5" @resetReplyOrReference="resetReplyOrReference"></MessageInputReferenceOrReply>
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, defineEmits, toRefs, ref, defineExpose, watch } from 'vue';
-import MessageInputEditor from './message-input-editor.vue';
-import MessageInputAt from './message-input-at.vue';
-import MessageInputButton from './message-input-button.vue';
-import MessageInputReferenceOrReply from './message-input-reference-or-reply.vue';
-import { JSONToObject } from '../utils/utils';
-import { handleErrorPrompts } from '../../utils';
+import { defineProps, defineEmits, toRefs, ref, defineExpose, watch } from "vue";
+import MessageInputEditor from "./message-input-editor.vue";
+import MessageInputAt from "./message-input-at.vue";
+import MessageInputButton from "./message-input-button.vue";
+import MessageInputReferenceOrReply from "./message-input-reference-or-reply.vue";
+import { JSONToObject } from "../utils/utils";
+import { handleErrorPrompts } from "../../utils";
 
 const props = defineProps({
   placeholder: {
     type: String,
-    default: 'this is placeholder',
+    default: "this is placeholder",
   },
   conversation: {
     type: Object,
@@ -65,7 +55,7 @@ const props = defineProps({
   },
   muteText: {
     type: String,
-    default: '',
+    default: "",
   },
   enableInput: {
     type: Boolean,
@@ -89,7 +79,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['sendMessage', 'resetReplyOrReference', 'onTyping']);
+const emit = defineEmits(["sendMessage", "resetReplyOrReference", "onTyping"]);
 const { placeholder, isGroup, memberList, conversation, replyOrReference, env, enableTyping } = toRefs(props);
 const editor = ref();
 const isH5 = ref(props?.env?.isH5);
@@ -117,7 +107,7 @@ const sendMessage = async () => {
       // handle message typing
       cloudCustomData = handleMessageWithTyping(cloudCustomData);
       switch (content?.type) {
-        case 'text':
+        case "text":
           // 引用和回复只支持文本消息（对标微信）
           // replay or reference message
           cloudCustomData = handleMessageReplyOrReference(cloudCustomData);
@@ -133,23 +123,23 @@ const sendMessage = async () => {
           } else {
             res = await TUIServer?.sendTextMessage(JSON.parse(JSON.stringify(content?.payload?.text)), cloudCustomData);
           }
-          if (replyOrReferenceObject?.show === 'reply') {
+          if (replyOrReferenceObject?.show === "reply") {
             await TUIServer.replyMessage(res?.data?.message);
           }
           break;
-        case 'image':
+        case "image":
           await TUIServer?.sendImageMessage(content?.payload?.file);
           break;
-        case 'video':
+        case "video":
           await TUIServer?.sendVideoMessage(content?.payload?.file);
           break;
-        case 'file':
+        case "file":
           await TUIServer?.sendFileMessage(content?.payload?.file);
           break;
         default:
           break;
       }
-      emit('sendMessage');
+      emit("sendMessage");
     } catch (error: any) {
       handleErrorPrompts(error, env.value);
     }
@@ -159,7 +149,7 @@ const sendMessage = async () => {
 };
 
 const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
-  emit('onTyping', inputContentEmpty, inputBlur);
+  emit("onTyping", inputContentEmpty, inputBlur);
 };
 
 const handleMessageWithTyping = (cloudCustomData: any) => {
@@ -176,7 +166,7 @@ const handleMessageWithTyping = (cloudCustomData: any) => {
 };
 
 const handleMessageReplyOrReference = (cloudCustomData: any) => {
-  if (replyOrReference?.value?.show !== 'reply' && replyOrReference?.value?.show !== 'reference') {
+  if (replyOrReference?.value?.show !== "reply" && replyOrReference?.value?.show !== "reference") {
     return cloudCustomData;
   }
   if (!cloudCustomData) {
@@ -189,13 +179,12 @@ const handleMessageReplyOrReference = (cloudCustomData: any) => {
     messageType: replyOrReference?.value?.type,
     version: 1,
   };
-  if (replyOrReference?.value?.show === 'reply') {
+  if (replyOrReference?.value?.show === "reply") {
     try {
       cloudCustomData.messageReply.messageRootID = replyOrReference?.value?.message?.ID;
       if (replyOrReference?.value?.message?.cloudCustomData) {
         const replyMessageCloudCustomData = JSONToObject(replyOrReference?.value?.message?.cloudCustomData as any);
-        cloudCustomData.messageReply.messageRootID =
-          replyMessageCloudCustomData?.messageReply?.messageRootID || replyOrReference?.value?.message?.ID;
+        cloudCustomData.messageReply.messageRootID = replyMessageCloudCustomData?.messageReply?.messageRootID || replyOrReference?.value?.message?.ID;
       }
     } catch (error) {
       console.warn(error);
@@ -209,7 +198,7 @@ const addEmoji = (emoji: any) => {
 };
 
 const resetReplyOrReference = () => {
-  emit('resetReplyOrReference');
+  emit("resetReplyOrReference");
 };
 
 const reEdit = (content: any) => {
@@ -225,8 +214,8 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
+@import url("../../../styles/common.scss");
+@import url("../../../styles/icon.scss");
 .message-input {
   flex: 1;
   position: relative;

src/TUIKit/TUIComponents/container/TUIChat/server.ts

@@ -1,7 +1,7 @@
-import { TUINotification } from '../../../TUIPlugin';
-import Message from '../../../TUICore/tim/index';
-import IComponentServer from '../IComponentServer';
-import { JSONToObject } from './utils/utils';
+import { TUINotification } from "../../../TUIPlugin";
+import Message from "../../../TUICore/tim/index";
+import IComponentServer from "../IComponentServer";
+import { JSONToObject } from "./utils/utils";
 /**
  * class TUIChatServer
  *
@@ -15,11 +15,7 @@ export default class TUIChatServer extends IComponentServer {
     super();
     this.TUICore = TUICore;
     this.bindTIMEvent();
-    this.store = TUICore.setComponentStore(
-      'TUIChat',
-      {},
-      this.updateStore.bind(this)
-    );
+    this.store = TUICore.setComponentStore("TUIChat", {}, this.updateStore.bind(this));
   }
 
   /**
@@ -44,11 +40,7 @@ export default class TUIChatServer extends IComponentServer {
       this.currentStore.messageList = [];
       return;
     }
-    if (
-      newValue.conversation.conversationID &&
-      newValue.conversation.conversationID !==
-        oldValue.conversation.conversationID
-    ) {
+    if (newValue.conversation.conversationID && newValue.conversation.conversationID !== oldValue.conversation.conversationID) {
       this.render(newValue.conversation);
     }
   }
@@ -60,13 +52,13 @@ export default class TUIChatServer extends IComponentServer {
     this.currentStore.readSet.clear();
     this.getMessageList({
       conversationID: conversation.conversationID,
-      count: len
+      count: len,
     });
     if (conversation.type === this.TUICore.TIM.TYPES.CONV_GROUP) {
       this.currentStore.userInfo.isGroup = true;
       const options = {
         groupID: conversation.groupProfile.groupID,
-        userIDList: [conversation.groupProfile.selfInfo.userID]
+        userIDList: [conversation.groupProfile.selfInfo.userID],
       };
       this.getGroupProfile({ groupID: conversation.groupProfile.groupID });
       this.getGroupMemberProfile(options).then((res: any) => {
@@ -77,7 +69,7 @@ export default class TUIChatServer extends IComponentServer {
       this?.TUICore?.TUIServer?.TUIGroup?.getGroupMemberList({
         groupID: conversation.groupProfile.groupID,
         count: 100,
-        offset: 0
+        offset: 0,
       }).then((res: any) => {
         this.currentStore.allMemberList = res.data?.memberList;
       });
@@ -97,74 +89,27 @@ export default class TUIChatServer extends IComponentServer {
    */
 
   private bindTIMEvent() {
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.MESSAGE_RECEIVED,
-      this.handleMessageReceived,
-      this
-    );
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.MESSAGE_MODIFIED,
-      this.handleMessageModified,
-      this
-    );
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.MESSAGE_REVOKED,
-      this.handleMessageRevoked,
-      this
-    );
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.MESSAGE_READ_BY_PEER,
-      this.handleMessageReadByPeer,
-      this
-    );
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.GROUP_LIST_UPDATED,
-      this.handleGroupListUpdated,
-      this
-    );
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.MESSAGE_READ_RECEIPT_RECEIVED,
-      this.handleMessageReadReceiptReceived,
-      this
-    );
+    this.TUICore.tim.on(this.TUICore.TIM.EVENT.MESSAGE_RECEIVED, this.handleMessageReceived, this);
+    this.TUICore.tim.on(this.TUICore.TIM.EVENT.MESSAGE_MODIFIED, this.handleMessageModified, this);
+    this.TUICore.tim.on(this.TUICore.TIM.EVENT.MESSAGE_REVOKED, this.handleMessageRevoked, this);
+    this.TUICore.tim.on(this.TUICore.TIM.EVENT.MESSAGE_READ_BY_PEER, this.handleMessageReadByPeer, this);
+    this.TUICore.tim.on(this.TUICore.TIM.EVENT.GROUP_LIST_UPDATED, this.handleGroupListUpdated, this);
+    this.TUICore.tim.on(this.TUICore.TIM.EVENT.MESSAGE_READ_RECEIPT_RECEIVED, this.handleMessageReadReceiptReceived, this);
   }
 
   private unbindTIMEvent() {
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.MESSAGE_RECEIVED,
-      this.handleMessageReceived
-    );
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.MESSAGE_MODIFIED,
-      this.handleMessageModified
-    );
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.MESSAGE_REVOKED,
-      this.handleMessageRevoked
-    );
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.MESSAGE_READ_BY_PEER,
-      this.handleMessageReadByPeer
-    );
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.GROUP_LIST_UPDATED,
-      this.handleGroupListUpdated
-    );
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.MESSAGE_READ_RECEIPT_RECEIVED,
-      this.handleMessageReadReceiptReceived
-    );
+    this.TUICore.tim.off(this.TUICore.TIM.EVENT.MESSAGE_RECEIVED, this.handleMessageReceived);
+    this.TUICore.tim.off(this.TUICore.TIM.EVENT.MESSAGE_MODIFIED, this.handleMessageModified);
+    this.TUICore.tim.off(this.TUICore.TIM.EVENT.MESSAGE_REVOKED, this.handleMessageRevoked);
+    this.TUICore.tim.off(this.TUICore.TIM.EVENT.MESSAGE_READ_BY_PEER, this.handleMessageReadByPeer);
+    this.TUICore.tim.off(this.TUICore.TIM.EVENT.GROUP_LIST_UPDATED, this.handleGroupListUpdated);
+    this.TUICore.tim.off(this.TUICore.TIM.EVENT.MESSAGE_READ_RECEIPT_RECEIVED, this.handleMessageReadReceiptReceived);
   }
 
   private handleMessageReceived(event: any) {
     event?.data?.forEach((message: Message) => {
-      if (
-        message?.conversationID === this?.store?.conversation?.conversationID
-      ) {
-        this.currentStore.messageList = [
-          ...this.currentStore.messageList,
-          message
-        ];
+      if (message?.conversationID === this?.store?.conversation?.conversationID) {
+        this.currentStore.messageList = [...this.currentStore.messageList, message];
       }
       TUINotification.getInstance().notify(message);
     });
@@ -222,42 +167,31 @@ export default class TUIChatServer extends IComponentServer {
    * @param {any} to 发送的对象
    * @returns {options} 消息参数
    */
-  public handleMessageOptions(
-    content: any,
-    type: string,
-    callback?: any,
-    to?: any
-  ) {
+  public handleMessageOptions(content: any, type: string, callback?: any, to?: any) {
     const options: any = {
-      to: '',
+      to: "",
       conversationType: to?.type || this.store.conversation.type,
       payload: content,
-      needReadReceipt: this.currentStore.needReadReceipt
+      needReadReceipt: this.currentStore.needReadReceipt,
     };
     if (this.currentStore.needTyping) {
       options.cloudCustomData = {
         messageFeature: {
           needTyping: 1,
-          version: 1
-        }
+          version: 1,
+        },
       };
       options.cloudCustomData = JSON.stringify(options.cloudCustomData);
     }
-    if (type === 'file' && callback) {
+    if (type === "file" && callback) {
       options.onProgress = callback;
     }
     switch (options.conversationType) {
       case this.TUICore.TIM.TYPES.CONV_C2C:
-        options.to =
-          to?.userProfile?.userID ||
-          this.store.conversation?.userProfile?.userID ||
-          '';
+        options.to = to?.userProfile?.userID || this.store.conversation?.userProfile?.userID || "";
         break;
       case this.TUICore.TIM.TYPES.CONV_GROUP:
-        options.to =
-          to?.groupProfile?.groupID ||
-          this.store.conversation?.groupProfile?.groupID ||
-          '';
+        options.to = to?.groupProfile?.groupID || this.store.conversation?.groupProfile?.groupID || "";
         break;
       default:
         break;
@@ -275,10 +209,10 @@ export default class TUIChatServer extends IComponentServer {
   public handlePromiseCallback(callback: any) {
     return new Promise<void>((resolve, reject) => {
       const config = {
-        TUIName: 'TUIChat',
+        TUIName: "TUIChat",
         callback: () => {
           callback && callback(resolve, reject);
-        }
+        },
       };
       this.TUICore.setAwaitFunc(config.TUIName, config.callback);
     });
@@ -310,10 +244,7 @@ export default class TUIChatServer extends IComponentServer {
         callback()
           .then(resolve)
           .catch((error: any) => {
-            if (
-              times > intervalList.length ||
-              (retryBreakFn && retryBreakFn(error))
-            ) {
+            if (times > intervalList.length || (retryBreakFn && retryBreakFn(error))) {
               reject(error);
               return;
             }
@@ -341,6 +272,23 @@ export default class TUIChatServer extends IComponentServer {
   }
 
   /**
+   * 删除会话
+   *
+   * @param {string} conversationID 会话ID
+   * @returns {Promise}
+   */
+  public async deleteConversation(conversationID: string) {
+    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
+      try {
+        const imResponse: any = await this.TUICore.tim.deleteConversation(conversationID);
+        resolve(imResponse);
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  /**
    * /////////////////////////////////////////////////////////////////////////////////
    * //
    * //                                 TIM 方法
@@ -361,18 +309,16 @@ export default class TUIChatServer extends IComponentServer {
   public sendFaceMessage(data: any): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const options = this.handleMessageOptions(data, 'face');
+        const options = this.handleMessageOptions(data, "face");
         const message = this.TUICore.tim.createFaceMessage(options);
         this.currentStore.messageList.push(message);
         const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
+        this.currentStore.messageList = this.currentStore.messageList.map((item: any) => {
+          if (item.ID === imResponse.data.message.ID) {
+            return imResponse.data.message;
           }
-        );
+          return item;
+        });
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -393,25 +339,19 @@ export default class TUIChatServer extends IComponentServer {
   public sendImageMessage(image: any): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const options = this.handleMessageOptions(
-          { file: image },
-          'file',
-          (progress: number) => {
-            this.handleUploadProgress(progress, message);
-          }
-        );
+        const options = this.handleMessageOptions({ file: image }, "file", (progress: number) => {
+          this.handleUploadProgress(progress, message);
+        });
         const message = this.TUICore.tim.createImageMessage(options);
         message.progress = 0.01;
         this.currentStore.messageList.push(message);
         const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
+        this.currentStore.messageList = this.currentStore.messageList.map((item: any) => {
+          if (item.ID === imResponse.data.message.ID) {
+            return imResponse.data.message;
           }
-        );
+          return item;
+        });
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -432,26 +372,20 @@ export default class TUIChatServer extends IComponentServer {
   public sendVideoMessage(video: any): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const options = this.handleMessageOptions(
-          { file: video },
-          'file',
-          (progress: number) => {
-            this.handleUploadProgress(progress, message);
-          }
-        );
+        const options = this.handleMessageOptions({ file: video }, "file", (progress: number) => {
+          this.handleUploadProgress(progress, message);
+        });
         const message = this.TUICore.tim.createVideoMessage(options);
         message.progress = 0.01;
         this.currentStore.messageList.push(message);
         const imResponse = await this.TUICore.tim.sendMessage(message);
 
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
+        this.currentStore.messageList = this.currentStore.messageList.map((item: any) => {
+          if (item.ID === imResponse.data.message.ID) {
+            return imResponse.data.message;
           }
-        );
+          return item;
+        });
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -472,25 +406,19 @@ export default class TUIChatServer extends IComponentServer {
   public sendFileMessage(file: any): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const options = this.handleMessageOptions(
-          { file },
-          'file',
-          (progress: number) => {
-            this.handleUploadProgress(progress, message);
-          }
-        );
+        const options = this.handleMessageOptions({ file }, "file", (progress: number) => {
+          this.handleUploadProgress(progress, message);
+        });
         const message = this.TUICore.tim.createFileMessage(options);
         message.progress = 0.01;
         this.currentStore.messageList.push(message);
         const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
+        this.currentStore.messageList = this.currentStore.messageList.map((item: any) => {
+          if (item.ID === imResponse.data.message.ID) {
+            return imResponse.data.message;
           }
-        );
+          return item;
+        });
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -515,18 +443,16 @@ export default class TUIChatServer extends IComponentServer {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
         data.data = JSON.stringify(data.data);
-        const options = this.handleMessageOptions(data, 'custom');
+        const options = this.handleMessageOptions(data, "custom");
         const message = this.TUICore.tim.createCustomMessage(options);
         this.currentStore.messageList.push(message);
         const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
+        this.currentStore.messageList = this.currentStore.messageList.map((item: any) => {
+          if (item.ID === imResponse.data.message.ID) {
+            return imResponse.data.message;
           }
-        );
+          return item;
+        });
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -550,7 +476,7 @@ export default class TUIChatServer extends IComponentServer {
   public sendLocationMessage(data: any): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const options = this.handleMessageOptions(data, 'location');
+        const options = this.handleMessageOptions(data, "location");
         const message = this.TUICore.tim.createLocationMessage(options);
         this.currentStore.messageList.push(message);
         const imResponse = await this.TUICore.tim.sendMessage(message);
@@ -575,13 +501,10 @@ export default class TUIChatServer extends IComponentServer {
   public forwardMessage(message: any, to: any): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const options = this.handleMessageOptions(message, 'forward', {}, to);
+        const options = this.handleMessageOptions(message, "forward", {}, to);
         const imMessage = this.TUICore.tim.createForwardMessage(options);
         const imResponse = await this.TUICore.tim.sendMessage(imMessage);
-        if (
-          this.store.conversation.conversationID ===
-          imResponse.data.message.conversationID
-        ) {
+        if (this.store.conversation.conversationID === imResponse.data.message.conversationID) {
           this.currentStore.messageList.push(imResponse.data.message);
         }
         resolve(imResponse);
@@ -604,9 +527,7 @@ export default class TUIChatServer extends IComponentServer {
   public async sendMessageReadReceipt(messageList: Array<any>) {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const imResponse: any = await this.TUICore.tim.sendMessageReadReceipt(
-          messageList
-        );
+        const imResponse: any = await this.TUICore.tim.sendMessageReadReceipt(messageList);
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -624,8 +545,7 @@ export default class TUIChatServer extends IComponentServer {
   public async getMessageReadReceiptList(messageList: Array<any>) {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const imResponse: any =
-          await this.TUICore.tim.getMessageReadReceiptList(messageList);
+        const imResponse: any = await this.TUICore.tim.getMessageReadReceiptList(messageList);
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -659,10 +579,7 @@ export default class TUIChatServer extends IComponentServer {
         if (!history) {
           this.currentStore.messageList = imResponse.data.messageList;
         } else {
-          this.currentStore.messageList = [
-            ...imResponse.data.messageList,
-            ...this.currentStore.messageList
-          ];
+          this.currentStore.messageList = [...imResponse.data.messageList, ...this.currentStore.messageList];
         }
         this.currentStore.nextReqMessageID = imResponse.data.nextReqMessageID;
         this.currentStore.isCompleted = imResponse.data.isCompleted;
@@ -684,7 +601,7 @@ export default class TUIChatServer extends IComponentServer {
     const options = {
       conversationID: this.currentStore.conversation.conversationID,
       nextReqMessageID: this.currentStore.nextReqMessageID,
-      count: 15
+      count: 15,
     };
     if (!this.currentStore.isCompleted) {
       this.getMessageList(options, true);
@@ -702,7 +619,7 @@ export default class TUIChatServer extends IComponentServer {
   public sendTextMessage(text: any, data: any): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const options = this.handleMessageOptions({ text }, 'text');
+        const options = this.handleMessageOptions({ text }, "text");
         let cloudCustomDataObj = {};
         if (options.cloudCustomData) {
           try {
@@ -714,19 +631,17 @@ export default class TUIChatServer extends IComponentServer {
         const cloudCustomData = JSON.stringify(data);
         const secondOptions = Object.assign(options, {
           cloudCustomData,
-          ...cloudCustomDataObj
+          ...cloudCustomDataObj,
         });
         const message = this.TUICore.tim.createTextMessage(secondOptions);
         this.currentStore.messageList.push(message);
         const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
+        this.currentStore.messageList = this.currentStore.messageList.map((item: any) => {
+          if (item.ID === imResponse.data.message.ID) {
+            return imResponse.data.message;
           }
-        );
+          return item;
+        });
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -751,10 +666,10 @@ export default class TUIChatServer extends IComponentServer {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
         data.data = JSON.stringify(data.data);
-        const options = this.handleMessageOptions(data, 'custom');
+        const options = this.handleMessageOptions(data, "custom");
         const message = this.TUICore.tim.createCustomMessage(options);
         const imResponse = await this.TUICore.tim.sendMessage(message, {
-          onlineUserOnly: true
+          onlineUserOnly: true,
         });
         resolve(imResponse);
       } catch (error) {
@@ -780,18 +695,16 @@ export default class TUIChatServer extends IComponentServer {
   public sendTextAtMessage(data: any) {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const options = this.handleMessageOptions(data, 'text');
+        const options = this.handleMessageOptions(data, "text");
         const message = this.TUICore.tim.createTextAtMessage(options);
         this.currentStore.messageList.push(message);
         const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
+        this.currentStore.messageList = this.currentStore.messageList.map((item: any) => {
+          if (item.ID === imResponse.data.message.ID) {
+            return imResponse.data.message;
           }
-        );
+          return item;
+        });
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -816,18 +729,16 @@ export default class TUIChatServer extends IComponentServer {
   public sendMergerMessage(data: any): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const options = this.handleMessageOptions(data, 'merger');
+        const options = this.handleMessageOptions(data, "merger");
         const message = this.TUICore.tim.createMergerMessage(options);
         this.currentStore.messageList.push(message);
         const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
+        this.currentStore.messageList = this.currentStore.messageList.map((item: any) => {
+          if (item.ID === imResponse.data.message.ID) {
+            return imResponse.data.message;
           }
-        );
+          return item;
+        });
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -874,9 +785,7 @@ export default class TUIChatServer extends IComponentServer {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
         const imResponse = await this.TUICore.tim.resendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.filter(
-          (item: any) => item.ID !== message.ID
-        );
+        this.currentStore.messageList = this.currentStore.messageList.filter((item: any) => item.ID !== message.ID);
         this.currentStore.messageList.push(imResponse.data.message);
         resolve(imResponse);
       } catch (error) {
@@ -924,16 +833,11 @@ export default class TUIChatServer extends IComponentServer {
         const code = (error as any)?.code;
         const data = (error as any)?.data;
         if (code === 2480) {
-          console.warn(
-            'MODIFY_MESSAGE_ERROR',
-            '修改消息发生冲突，data.message 是最新的消息',
-            'data.message:',
-            data?.message
-          );
+          console.warn("MODIFY_MESSAGE_ERROR", "修改消息发生冲突，data.message 是最新的消息", "data.message:", data?.message);
         } else if (code === 2481) {
-          console.warn('MODIFY_MESSAGE_ERROR', '不支持修改直播群消息');
+          console.warn("MODIFY_MESSAGE_ERROR", "不支持修改直播群消息");
         } else if (code === 20026) {
-          console.warn('MODIFY_MESSAGE_ERROR', '消息不存在');
+          console.warn("MODIFY_MESSAGE_ERROR", "消息不存在");
         }
         reject(error);
       }
@@ -956,29 +860,24 @@ export default class TUIChatServer extends IComponentServer {
             messageType: message?.type,
             messageTime: message?.time,
             messageSequence: message?.sequence,
-            version: 1
+            version: 1,
           };
           if (!messageRoot) {
             const cloudCustomData = JSONToObject(message?.cloudCustomData);
             const messageRootID = cloudCustomData?.messageReply?.messageRootID;
-            messageRoot =
-              (await this?.currentStore?.messageList?.find(
-                (item: any) => item?.ID === messageRootID
-              )) || this.findMessage(messageRootID);
+            messageRoot = (await this?.currentStore?.messageList?.find((item: any) => item?.ID === messageRootID)) || this.findMessage(messageRootID);
           }
-          const rootCloudCustomData = messageRoot?.cloudCustomData
-            ? JSONToObject(messageRoot?.cloudCustomData)
-            : { messageReplies: {} };
+          const rootCloudCustomData = messageRoot?.cloudCustomData ? JSONToObject(messageRoot?.cloudCustomData) : { messageReplies: {} };
           if (rootCloudCustomData?.messageReplies?.replies) {
             rootCloudCustomData.messageReplies.replies = [
               // eslint-disable-next-line no-unsafe-optional-chaining
               ...rootCloudCustomData?.messageReplies?.replies,
-              repliesObject
+              repliesObject,
             ];
           } else {
             rootCloudCustomData.messageReplies = {
               replies: [repliesObject],
-              version: 1
+              version: 1,
             };
           }
           messageRoot.cloudCustomData = JSON.stringify(rootCloudCustomData);
@@ -993,11 +892,7 @@ export default class TUIChatServer extends IComponentServer {
       if (error && error?.code === 2480) return false;
       return true;
     };
-    return this.handlePromiseCallbackRetry(
-      replyFunction,
-      [500, 1000, 3000],
-      retryBreakFunction
-    );
+    return this.handlePromiseCallbackRetry(replyFunction, [500, 1000, 3000], retryBreakFunction);
   }
 
   /**
@@ -1013,18 +908,11 @@ export default class TUIChatServer extends IComponentServer {
           if (!messageRoot) {
             const cloudCustomData = JSONToObject(message?.cloudCustomData);
             const messageRootID = cloudCustomData?.messageReply?.messageRootID;
-            messageRoot =
-              (await this?.currentStore?.messageList?.find(
-                (item: any) => item?.ID === messageRootID
-              )) || this.findMessage(messageRootID);
+            messageRoot = (await this?.currentStore?.messageList?.find((item: any) => item?.ID === messageRootID)) || this.findMessage(messageRootID);
           }
-          const rootCloudCustomData = messageRoot?.cloudCustomData
-            ? JSONToObject(messageRoot?.cloudCustomData)
-            : { messageReplies: {} };
+          const rootCloudCustomData = messageRoot?.cloudCustomData ? JSONToObject(messageRoot?.cloudCustomData) : { messageReplies: {} };
           if (rootCloudCustomData?.messageReplies?.replies) {
-            const index = rootCloudCustomData.messageReplies.replies.findIndex(
-              (item: any) => item?.messageID === message?.ID
-            );
+            const index = rootCloudCustomData.messageReplies.replies.findIndex((item: any) => item?.messageID === message?.ID);
             rootCloudCustomData?.messageReplies?.replies?.splice(index, 1);
           }
           messageRoot.cloudCustomData = JSON.stringify(rootCloudCustomData);
@@ -1039,11 +927,7 @@ export default class TUIChatServer extends IComponentServer {
       if (error && error?.code === 2480) return false;
       return true;
     };
-    return this.handlePromiseCallbackRetry(
-      revokeReplyFunction,
-      [500, 1000, 3000],
-      retryBreakFunction
-    );
+    return this.handlePromiseCallbackRetry(revokeReplyFunction, [500, 1000, 3000], retryBreakFunction);
   }
 
   /**
@@ -1057,29 +941,17 @@ export default class TUIChatServer extends IComponentServer {
       return this.handlePromiseCallback(async (resolve: any, reject: any) => {
         try {
           if (!message || !message?.ID || !emojiID) reject();
-          const userID =
-            this.TUICore?.TUIServer?.TUIProfile?.store?.profile?.userID;
-          message =
-            (await this?.currentStore?.messageList?.find(
-              (item: any) => item?.ID === message?.ID
-            )) || this.findMessage(message?.ID);
-          const cloudCustomData = message?.cloudCustomData
-            ? JSONToObject(message?.cloudCustomData)
-            : { messageReact: {} };
+          const userID = this.TUICore?.TUIServer?.TUIProfile?.store?.profile?.userID;
+          message = (await this?.currentStore?.messageList?.find((item: any) => item?.ID === message?.ID)) || this.findMessage(message?.ID);
+          const cloudCustomData = message?.cloudCustomData ? JSONToObject(message?.cloudCustomData) : { messageReact: {} };
           if (cloudCustomData?.messageReact?.reacts) {
             if (cloudCustomData?.messageReact?.reacts[emojiID]) {
-              const index =
-                cloudCustomData?.messageReact?.reacts[emojiID]?.indexOf(userID);
+              const index = cloudCustomData?.messageReact?.reacts[emojiID]?.indexOf(userID);
               if (index === -1) {
                 cloudCustomData?.messageReact?.reacts[emojiID]?.push(userID);
               } else {
-                cloudCustomData?.messageReact?.reacts[emojiID]?.splice(
-                  index,
-                  1
-                );
-                if (
-                  cloudCustomData?.messageReact?.reacts[emojiID]?.length === 0
-                ) {
+                cloudCustomData?.messageReact?.reacts[emojiID]?.splice(index, 1);
+                if (cloudCustomData?.messageReact?.reacts[emojiID]?.length === 0) {
                   delete cloudCustomData?.messageReact?.reacts[emojiID];
                 }
               }
@@ -1089,7 +961,7 @@ export default class TUIChatServer extends IComponentServer {
           } else {
             cloudCustomData.messageReact = {
               reacts: {},
-              version: 1
+              version: 1,
             };
             cloudCustomData.messageReact.reacts[emojiID] = [userID];
           }
@@ -1105,11 +977,7 @@ export default class TUIChatServer extends IComponentServer {
       if (error && error?.code === 2480) return false;
       return true;
     };
-    return this.handlePromiseCallbackRetry(
-      emojiReactFunction,
-      [500, 1000, 3000],
-      retryBreakFunction
-    );
+    return this.handlePromiseCallbackRetry(emojiReactFunction, [500, 1000, 3000], retryBreakFunction);
   }
 
   /**
@@ -1163,9 +1031,7 @@ export default class TUIChatServer extends IComponentServer {
   public getGroupMemberProfile(options: any): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const imResponse = await this.TUICore.tim.getGroupMemberProfile(
-          options
-        );
+        const imResponse = await this.TUICore.tim.getGroupMemberProfile(options);
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -1188,9 +1054,7 @@ export default class TUIChatServer extends IComponentServer {
   public handleGroupApplication(options: any): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const imResponse = await this.TUICore.tim.handleGroupApplication(
-          options
-        );
+        const imResponse = await this.TUICore.tim.handleGroupApplication(options);
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -1209,7 +1073,7 @@ export default class TUIChatServer extends IComponentServer {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
         const imResponse = await this.TUICore.tim.getUserProfile({
-          userIDList
+          userIDList,
         });
         resolve(imResponse);
       } catch (error) {
@@ -1248,7 +1112,7 @@ export default class TUIChatServer extends IComponentServer {
       try {
         const imResponse = await this.TUICore.tim.checkFriend({
           userIDList: [userID],
-          type
+          type,
         });
         const isFriendShip = imResponse?.data?.successUserIDList[0]?.relation;
         resolve(isFriendShip);
@@ -1267,21 +1131,15 @@ export default class TUIChatServer extends IComponentServer {
    * @param {number} count 分页拉取的个数/The number of page pulls
    * @returns {Promise}
    */
-  public async getGroupReadMemberList(
-    message: any,
-    cursor = '',
-    count = 15
-  ): Promise<any> {
+  public async getGroupReadMemberList(message: any, cursor = "", count = 15): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const imResponse = await this.TUICore.tim.getGroupMessageReadMemberList(
-          {
-            message,
-            filter: 0,
-            cursor,
-            count
-          }
-        );
+        const imResponse = await this.TUICore.tim.getGroupMessageReadMemberList({
+          message,
+          filter: 0,
+          cursor,
+          count,
+        });
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -1298,21 +1156,15 @@ export default class TUIChatServer extends IComponentServer {
    * @param {number} count 分页拉取的个数/The number of page pulls
    * @returns {Promise}
    */
-  public async getGroupUnreadMemberList(
-    message: any,
-    cursor = '',
-    count = 15
-  ): Promise<any> {
+  public async getGroupUnreadMemberList(message: any, cursor = "", count = 15): Promise<any> {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const imResponse = await this.TUICore.tim.getGroupMessageReadMemberList(
-          {
-            message,
-            filter: 1,
-            cursor,
-            count
-          }
-        );
+        const imResponse = await this.TUICore.tim.getGroupMessageReadMemberList({
+          message,
+          filter: 1,
+          cursor,
+          count,
+        });
         resolve(imResponse);
       } catch (error) {
         reject(error);

src/TUIKit/TUIComponents/container/TUIChat/style/web.scss

@@ -180,7 +180,7 @@
     bottom: 10Px;
     left: 100%;
     margin-right: 15Px;
-    width: 92Px;
+    width: 110Px;
     height: 28Px;
     padding: 0 5Px;
     background: #ffffff;

src/TUIKit/TUIComponents/container/TUIConversation/index.vue

@@ -106,7 +106,6 @@ const TUIConversation = defineComponent({
 
     onMounted(() => {
       window.addEventListener("message", (params?: any) => {
-        console.log(params, "message");
         if (!params.data?.imUserId) return;
 
         TUIServer.getConversationProfile(`C2C${params?.data.imUserId}`)

src/TUIKit/TUIComponents/container/utils.ts

@@ -1,5 +1,5 @@
-import TUIMessage from '../components/messageTUI/index';
-import Error from './error';
+import TUIMessage from "../components/messageTUI/index";
+import Error from "./error";
 
 export function caculateTimeago(dateTimeStamp: number) {
   const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
@@ -9,7 +9,7 @@ export function caculateTimeago(dateTimeStamp: number) {
   const week = day * 7;
   const now = new Date().getTime();
   const diffValue = now - dateTimeStamp;
-  let result = '';
+  let result = "";
 
   if (diffValue < 0) {
     return;
@@ -19,25 +19,21 @@ export function caculateTimeago(dateTimeStamp: number) {
   const dayC = diffValue / day;
   const weekC = diffValue / week;
   if (weekC >= 1 && weekC <= 4) {
-    result = ` ${parseInt(`${weekC}`, 10)} ${t('time.周')}${t('time.前')}`;
+    result = ` ${parseInt(`${weekC}`, 10)} ${t("time.周")}${t("time.前")}`;
   } else if (dayC >= 1 && dayC <= 6) {
-    result = ` ${parseInt(`${dayC}`, 10)} ${t('time.天')}${t('time.前')}`;
+    result = ` ${parseInt(`${dayC}`, 10)} ${t("time.天")}${t("time.前")}`;
   } else if (hourC >= 1 && hourC <= 23) {
-    result = ` ${parseInt(`${hourC}`, 10)} ${t('time.小时')}${t('time.前')}`;
+    result = ` ${parseInt(`${hourC}`, 10)} ${t("time.小时")}${t("time.前")}`;
   } else if (minC >= 1 && minC <= 59) {
-    result = ` ${parseInt(`${minC}`, 10)} ${t('time.分钟')}${t('time.前')}`;
+    result = ` ${parseInt(`${minC}`, 10)} ${t("time.分钟")}${t("time.前")}`;
   } else if (diffValue >= 0 && diffValue <= minute) {
-    result = `${t('time.刚刚')}`;
+    result = `${t("time.刚刚")}`;
   } else {
     const datetime = new Date();
     datetime.setTime(dateTimeStamp);
     const Nyear = datetime.getFullYear();
-    const Nmonth =
-      datetime.getMonth() + 1 < 10
-        ? `0${datetime.getMonth() + 1}`
-        : datetime.getMonth() + 1;
-    const Ndate =
-      datetime.getDate() < 10 ? `0${datetime.getDate()}` : datetime.getDate();
+    const Nmonth = datetime.getMonth() + 1 < 10 ? `0${datetime.getMonth() + 1}` : datetime.getMonth() + 1;
+    const Ndate = datetime.getDate() < 10 ? `0${datetime.getDate()}` : datetime.getDate();
     result = `${Nyear}-${Nmonth}-${Ndate}`;
   }
   return result;
@@ -47,76 +43,56 @@ export function caculateTimeago(dateTimeStamp: number) {
 // Handle the system messages
 export function translateGroupSystemNotice(message: any) {
   const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
-  const groupName =
-    message.payload.groupProfile.name || message.payload.groupProfile.groupID;
+  const groupName = message.payload.groupProfile.name || message.payload.groupProfile.groupID;
   switch (message.payload.operationType) {
     case 1:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.申请加入群组'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t("message.tip.申请加入群组")}：${groupName}`;
     case 2:
-      return `${t('message.tip.成功加入群组')}：${groupName}`;
+      return `${t("message.tip.成功加入群组")}：${groupName}`;
     case 3:
-      return `${t('message.tip.申请加入群组')}：${groupName} ${t(
-        'message.tip.被拒绝'
-      )}`;
+      return `${t("message.tip.申请加入群组")}：${groupName} ${t("message.tip.被拒绝")}`;
     case 4:
-      return `${t('message.tip.你被管理员')}${message.payload.operatorID} ${t(
-        'message.tip.踢出群组'
-      )}：${groupName}`;
+      return `${t("message.tip.你被管理员")}${message.payload.operatorID} ${t("message.tip.踢出群组")}：${groupName}`;
     case 5:
-      return `${t('message.tip.群')}：${groupName} ${t('message.tip.被')} ${
-        message.payload.operatorID
-      } ${t('message.tip.解散')}`;
+      return `${t("message.tip.群")}：${groupName} ${t("message.tip.被")} ${message.payload.operatorID} ${t("message.tip.解散")}`;
     case 6:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.创建群'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t("message.tip.创建群")}：${groupName}`;
     case 7:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.邀请你加群'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t("message.tip.邀请你加群")}：${groupName}`;
     case 8:
-      return `${t('message.tip.你退出群组')}：${groupName}`;
+      return `${t("message.tip.你退出群组")}：${groupName}`;
     case 9:
-      return `${t('message.tip.你被')}${message.payload.operatorID} ${t(
-        'message.tip.设置为群'
-      )}：${groupName} ${t('message.tip.的管理员')}`;
+      return `${t("message.tip.你被")}${message.payload.operatorID} ${t("message.tip.设置为群")}：${groupName} ${t("message.tip.的管理员")}`;
     case 10:
-      return `${t('message.tip.你被')}${message.payload.operatorID} ${t(
-        'message.tip.撤销群'
-      )}：${groupName} ${t('message.tip.的管理员身份')}`;
+      return `${t("message.tip.你被")}${message.payload.operatorID} ${t("message.tip.撤销群")}：${groupName} ${t("message.tip.的管理员身份")}`;
     case 12:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.邀请你加群'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t("message.tip.邀请你加群")}：${groupName}`;
     case 13:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.同意加群'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t("message.tip.同意加群")}：${groupName}`;
     case 14:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.拒接加群'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t("message.tip.拒接加群")}：${groupName}`;
     case 255:
-      return `${t('message.tip.自定义群系统通知')}: ${
-        message.payload.userDefinedField
-      }`;
+      return `${t("message.tip.自定义群系统通知")}: ${message.payload.userDefinedField}`;
   }
 }
 
 export function handleErrorPrompts(error: any, type: any) {
+  console.log(error, "error", error.type, error.message);
+  if (error.message.indexOf("this group does not exist") !== -1) {
+    error.message = "当前群组已解散";
+    // error.replace("Error: this group does not exist", "当前群组已解散");
+  }
   if (error?.type && error?.message) {
     TUIMessage({
       message: `${error.type} : ${error.message}` || error,
       isH5: !!type?.isH5,
-      type: 'error'
+      type: "error",
     });
   } else {
     TUIMessage({
-      message: Error[error.code] || error,
+      message: Error[error.code] || error.message,
       isH5: !!type?.isH5,
-      type: 'error'
+      type: "error",
     });
   }
 }
@@ -125,7 +101,7 @@ export function handleSuccessPrompts(message: any, type: any) {
   TUIMessage({
     message,
     isH5: !!type?.isH5,
-    type: 'success'
+    type: "success",
   });
 }
 

src/TUIKit/api.ts

@@ -62,3 +62,57 @@ export const imGroupNoticeUpdate = (params?: object) => {
 export const imGroupDetail = (params?: any) => {
   return request.get(api + "/imGroup/detail/" + params.id);
 };
+
+/**
+ * 即时通讯 - 群成员
+ */
+export const imGroupMemberPage = (params?: any) => {
+  return request.post(api + "/imGroupMember/page", {
+    data: params,
+  });
+};
+
+/**
+ * 即时通讯 - 用户详情
+ */
+export const imGroupMemberUserDetail = (params?: any) => {
+  return request.post(api + "/imGroupMember/userDetail", {
+    data: params,
+  });
+};
+
+/**
+ * 即时通讯 - 退出群聊
+ */
+export const imGroupQuit = (params?: any) => {
+  return request.post(api + "/imGroup/quit/" + params.id, {
+    data: params,
+  });
+};
+
+/**
+ * 即时通讯 - 全体禁言-解除禁言
+ */
+export const imGroupMuteAll = (params?: any) => {
+  return request.post(api + "/imGroup/muteAll", {
+    data: params,
+  });
+};
+
+/**
+ * 即时通讯 - 批量IM新增
+ */
+export const imGroupMemberSaveImAll = (params?: any) => {
+  return request.post(api + "/imGroupMember/saveImAll", {
+    data: params,
+  });
+};
+
+/**
+ * 即时通讯 - 解散群聊
+ */
+export const imGroupDismiss = (params?: any) => {
+  return request.post(api + "/imGroup/dismiss/" + params.id, {
+    data: params,
+  });
+};