修改发送消息

src/TUIKit/TUIComponents/components/transferTUI/index.vue

@@ -7,60 +7,41 @@
     <main class="main">
       <div class="left">
         <header v-if="isSearch">
-          <input
-            type="text"
-            @keyup.enter="handleInput"
-            :placeholder="$t('component.请输入userID')"
-            enterkeyhint="search"
-          />
+          <input type="text" @keyup.enter="handleInput" :placeholder="$t('component.请输入userID')" enterkeyhint="search" />
         </header>
         <main>
           <ul class="list">
             <li class="list-item" @click="selectedAll" v-if="optional.length > 1 && !isRadio">
-              <i
-                class="icon"
-                :class="[selectedList.length === optional.length ? 'icon-selected' : 'icon-unselected']"
-              ></i>
-              <span class="all">{{ $t('component.全选') }}</span>
+              <i class="icon" :class="[selectedList.length === optional.length ? 'icon-selected' : 'icon-unselected']"></i>
+              <span class="all">{{ $t("component.全选") }}</span>
             </li>
             <li class="list-item" v-for="(item, index) in list" :key="index" @click="selected(item)">
-              <i
-                class="icon"
-                :class="[
-                  item?.isDisabled && 'disabled',
-                  selectedList.indexOf(item) > -1 ? 'icon-selected' : 'icon-unselected',
-                ]"
-              ></i>
+              <i class="icon" :class="[item?.isDisabled && 'disabled', selectedList.indexOf(item) > -1 ? 'icon-selected' : 'icon-unselected']"></i>
               <template v-if="!isCustomItem">
-                <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'"
-                />
+                <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>
-                <span v-if="item?.isDisabled">（{{ $t('component.已在群聊中') }}）</span>
+                <span v-if="item?.isDisabled">（{{ $t("component.已在群聊中") }}）</span>
               </template>
               <template v-else>
                 <slot name="left" :data="item" />
               </template>
             </li>
           </ul>
+
+          <div class="theEmtpy" v-if="optional.length <= 0" style="height: 90%">
+            <img class="emptyImg" src="../../assets/nomore.png" />
+            <p>暂无数据</p>
+          </div>
         </main>
       </div>
       <div class="right">
         <header v-if="!isH5">{{ title }}</header>
         <ul class="list" v-show="resultShow">
-          <p v-if="selectedList.length > 0 && !isH5">
-            {{ $t('component.已选中') }}{{ selectedList.length }}{{ $t('component.人') }}
-          </p>
+          <p v-if="selectedList.length > 0 && !isH5">{{ $t("component.已选中") }}{{ selectedList.length }}{{ $t("component.人") }}</p>
           <li class="list-item space-between" v-for="(item, index) in selectedList" :key="index">
             <aside>
               <template v-if="!isCustomItem">
-                <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'"
-                />
+                <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 v-if="!isH5">{{ item.nick || item.userID }}</span>
               </template>
               <template v-else>
@@ -71,9 +52,9 @@
           </li>
         </ul>
         <footer>
-          <button class="btn btn-cancel" @click="cancel">{{ $t('component.取消') }}</button>
-          <button v-if="selectedList.length > 0" class="btn" @click="submit">{{ $t('component.完成') }}</button>
-          <button v-else class="btn btn-no" @click="submit">{{ $t('component.完成') }}</button>
+          <button class="btn btn-cancel" @click="cancel">{{ $t("component.取消") }}</button>
+          <button v-if="selectedList.length > 0" class="btn" @click="submit">{{ $t("component.完成") }}</button>
+          <button v-else class="btn btn-no" @click="submit">{{ $t("component.完成") }}</button>
         </footer>
       </div>
     </main>
@@ -81,7 +62,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, watchEffect, toRefs, computed } from 'vue';
+import { defineComponent, reactive, watchEffect, toRefs, computed } from "vue";
 
 export default defineComponent({
   props: {
@@ -107,11 +88,11 @@ export default defineComponent({
     },
     title: {
       type: String,
-      default: () => '',
+      default: () => "",
     },
     type: {
       type: String,
-      default: () => '',
+      default: () => "",
     },
     isH5: {
       type: Boolean,
@@ -124,18 +105,18 @@ export default defineComponent({
   },
   setup(props: any, ctx: any) {
     const data = reactive({
-      type: '',
+      type: "",
       list: [],
       selectedList: [],
       isSearch: true,
       isCustomItem: false,
-      title: '',
+      title: "",
     });
 
     watchEffect(() => {
       if (props.isCustomItem) {
         for (let index = 0; index < props.list.length; index++) {
-          if (props.list[index].conversationID.indexOf('@TIM#SYSTEM') > -1) {
+          if (props.list[index].conversationID.indexOf("@TIM#SYSTEM") > -1) {
             // eslint-disable-next-line vue/no-mutating-props
             props.list.splice(index, 1);
           }
@@ -155,7 +136,7 @@ export default defineComponent({
     const optional = computed(() => data.list.filter((item: any) => !item.isDisabled));
 
     const handleInput = (e: any) => {
-      ctx.emit('search', e.target.value);
+      ctx.emit("search", e.target.value);
     };
 
     const selected = (item: any) => {
@@ -183,11 +164,11 @@ export default defineComponent({
     };
 
     const submit = () => {
-      ctx.emit('submit', data.selectedList);
+      ctx.emit("submit", data.selectedList);
     };
 
     const cancel = () => {
-      ctx.emit('cancel');
+      ctx.emit("cancel");
     };
 
     return {

src/TUIKit/TUIComponents/components/transferTUI/style/web.scss

@@ -132,4 +132,17 @@ img,
 .all {
   padding-left: 8Px;
   font-size: 14Px;
+}
+
+.theEmtpy {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  .emptyImg {
+    width: 240px;
+    height: 240px;
+  }
 }

src/TUIKit/TUIComponents/container/TUIChat/components/index.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, defineProps, defineEmits, ref } from "vue";
+import { toRefs, defineProps, defineEmits, ref, onMounted } from "vue";
 import MessageBubble from "./message-bubble.vue";
 import MessageText from "./message-text.vue";
 import MessageImage from "./message-image.vue";
@@ -79,6 +79,7 @@ import {
 } from "../utils/utils";
 import { Message } from "@tencentcloud/chat";
 import constant from "../../constant";
+import manage from "../manage-components/manage.vue";
 
 const props = defineProps({
   message: {
@@ -111,11 +112,20 @@ const props = defineProps({
     default: true,
   },
 });
+const TUIServer = manage?.TUIServer;
 const dialogShow = ref(false);
 const dialogMessageList = ref([] as any);
 const emits = defineEmits(["handleEditor", "showDialog", "uploading", "jumpID", "resendMessage"]);
 const { message, types, env, messageList, displayGroupMessageReadReceipt, displayEmojiReactions } = toRefs(props);
-console.log(props.messageList, "message", props.message, "121212");
+
+onMounted(async () => {
+  // 处理显示tip消息，不显示名称的问题
+  if (props.message?.payload?.operatorID && props.message?.payload?.operatorID.indexOf("KT") != -1) {
+    const operatorInfo = await TUIServer.getUserProfile([props.message?.payload?.operatorID]);
+    message.value.payload.operatorID = operatorInfo.data[0]?.nick;
+  }
+});
+
 const handleEdit = (message: any) => {
   emits("handleEditor", message, "reedit");
 };

src/TUIKit/TUIComponents/container/TUIChat/components/message-tip.vue

@@ -5,18 +5,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
+import { defineComponent, watchEffect, reactive, toRefs } from "vue";
 
 export default defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   setup(props: any, ctx: any) {
     const data = reactive({
-      message: {}
+      message: {},
     });
 
     watchEffect(() => {
@@ -24,18 +24,18 @@ export default defineComponent({
     });
 
     return {
-      ...toRefs(data)
+      ...toRefs(data),
     };
-  }
+  },
 });
 </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");
 .message-tip {
   margin: 0 auto;
   color: #999999;
-  font-size: 12Px;
+  font-size: 12px;
   width: -webkit-fill-available;
   overflow-wrap: anywhere;
   display: flex;

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

@@ -13,13 +13,7 @@
           <span class="close" @click="toggleEdit">{{ $t(`关闭`) }}</span>
         </header>
         <div class="input-box">
-          <input
-            class="input"
-            v-if="isEdit"
-            v-model="input"
-            type="text"
-            @keyup.enter="updateProfile"
-          />
+          <input class="input" v-if="isEdit" v-model="input" type="text" @keyup.enter="updateProfile" />
           <span v-if="isH5">
             {{ $t(`TUIChat.manage.仅限中文、字母、数字和下划线，2-20个字`) }}
           </span>
@@ -31,37 +25,38 @@
         </footer>
       </main>
     </div>
-    <p v-if="!isEdit || isH5" @click="toggleEdit">
+    <!-- @click="toggleEdit" -->
+    <p v-if="!isEdit || isH5">
       <span>{{ groupProfile.name }}</span>
-      <i class="icon icon-edit" v-if="isAuth"></i>
+      <!-- <i class="icon icon-edit" v-if="isAuth"></i> -->
     </p>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs, ref } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+import { defineComponent, watchEffect, reactive, toRefs, ref } from "vue";
+import { onClickOutside } from "@vueuse/core";
 
 const manageName = defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     isAuth: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isH5: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   setup(props: any, ctx: any) {
     const data: any = reactive({
       groupProfile: {},
-      input: '',
-      isEdit: false
+      input: "",
+      isEdit: false,
     });
 
     watchEffect(() => {
@@ -76,9 +71,9 @@ const manageName = defineComponent({
 
     const updateProfile = async () => {
       if (data.input && data.input !== data.groupProfile.name) {
-        ctx.emit('update', { key: 'name', value: data.input });
+        ctx.emit("update", { key: "name", value: data.input });
         data.groupProfile.name = data.input;
-        data.input = '';
+        data.input = "";
       }
       toggleEdit();
     };
@@ -96,20 +91,20 @@ const manageName = defineComponent({
       ...toRefs(data),
       updateProfile,
       toggleEdit,
-      dialog
+      dialog,
     };
-  }
+  },
 });
 export default manageName;
 </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");
 .name {
-  padding: 14Px 20Px;
+  padding: 14px 20px;
   font-weight: 400;
-  font-size: 14Px;
+  font-size: 14px;
   color: #000000;
   display: flex;
   flex-direction: column;
@@ -118,7 +113,7 @@ export default manageName;
     display: flex;
     align-items: center;
     .icon {
-      margin-left: 4Px;
+      margin-left: 4px;
     }
   }
 }
@@ -126,18 +121,18 @@ export default manageName;
   display: flex;
   .input {
     flex: 1;
-    border: 1Px solid #e8e8e9;
-    border-radius: 4Px;
-    padding: 4Px 16Px;
+    border: 1px solid #e8e8e9;
+    border-radius: 4px;
+    padding: 4px 16px;
     font-weight: 400;
-    font-size: 14Px;
+    font-size: 14px;
     color: #000000;
     opacity: 0.6;
   }
 }
 
 .space-top {
-  border-top: 10Px solid #f4f5f9;
+  border-top: 10px solid #f4f5f9;
 }
 .edit-h5 {
   position: fixed;
@@ -152,22 +147,22 @@ export default manageName;
   main {
     background: #ffffff;
     flex: 1;
-    padding: 18Px;
-    border-radius: 12Px 12Px 0 0;
+    padding: 18px;
+    border-radius: 12px 12px 0 0;
     .input-box {
       flex-direction: column;
-      padding: 18Px 0;
+      padding: 18px 0;
       .input {
         background: #f8f8f8;
-        padding: 10Px 12Px;
+        padding: 10px 12px;
       }
       span {
         font-family: PingFangSC-Regular;
         font-weight: 400;
-        font-size: 12Px;
+        font-size: 12px;
         color: #888888;
         letter-spacing: 0;
-        padding-top: 8Px;
+        padding-top: 8px;
       }
     }
   }
@@ -178,10 +173,10 @@ export default manageName;
     .close {
       font-family: PingFangSC-Regular;
       font-weight: 400;
-      font-size: 18Px;
+      font-size: 18px;
       color: #3370ff;
       letter-spacing: 0;
-      line-height: 27Px;
+      line-height: 27px;
     }
   }
   &-footer {
@@ -190,14 +185,14 @@ export default manageName;
       flex: 1;
       border: none;
       background: #147aff;
-      border-radius: 5Px;
+      border-radius: 5px;
       font-family: PingFangSC-Regular;
       font-weight: 400;
-      font-size: 16Px;
+      font-size: 16px;
       color: #ffffff;
       letter-spacing: 0;
-      line-height: 27Px;
-      padding: 8Px 0;
+      line-height: 27px;
+      padding: 8px 0;
       &:disabled {
         opacity: 0.3;
       }

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

@@ -1,15 +1,11 @@
 <template>
   <main class="notification">
-    <textarea
-      v-if="isEdit"
-      v-model="input"
-      @keyup.enter="updateProfile"
-    ></textarea>
+    <textarea v-if="isEdit" v-model="input" @keyup.enter="updateProfile"></textarea>
     <section v-else>
-      <p v-if="!groupProfile.notification">
+      <p v-if="!groupList.content">
         {{ $t(`TUIChat.manage.暂无公告`) }}
       </p>
-      <article v-else>{{ groupProfile.notification }}</article>
+      <article v-else>{{ groupList.content }}</article>
     </section>
     <footer v-if="isAuth">
       <button class="btn" v-if="isEdit" @click="updateProfile">
@@ -23,93 +19,134 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
+import { defineComponent, watchEffect, reactive, toRefs, onMounted } from "vue";
+import { imGroupNoticePage, imGroupNoticeSave, imGroupNoticeUpdate } from "../../../../api";
 
 const ManageNotification = defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     isAuth: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   setup(props: any, ctx: any) {
     const data: any = reactive({
       groupProfile: {},
-      input: '',
-      isEdit: false
+      input: "",
+      groupList: {},
+      isEdit: false,
     });
+    const getNotification = async () => {
+      try {
+        // 获取群公告
+        let res = await imGroupNoticePage({
+          groupId: data.groupProfile.groupID,
+          page: 1,
+          rows: 1,
+        });
+        const result = res.data.rows || [];
+        if (result.length > 0) {
+          data.input = result[0].content;
+          data.groupList = result[0];
+        }
+      } catch (e: any) {
+        //
+      }
+    };
 
     watchEffect(() => {
       data.groupProfile = props.data;
-      data.input = data.groupProfile.notification;
+      // 不使用默认的数据，从我们自己的数据库中选择
+      // data.input = data.groupProfile.notification;
+      getNotification();
     });
 
     // 更新群资料
     const updateProfile = async () => {
       if (data.input && data.input !== data.groupProfile.notification) {
-        ctx.emit('update', { key: 'notification', value: data.input });
-        data.groupProfile.notification = data.input;
-        data.input = '';
+        // ctx.emit("update", { key: "notification", value: data.input });
+        // data.groupProfile.notification = data.input;
+        // data.input = "";
+        try {
+          const params = {
+            clientType: "TEACHER",
+            groupId: data.groupProfile.groupID,
+            content: data.input,
+          };
+          if (data.groupList.id) {
+            await imGroupNoticeUpdate({
+              ...params,
+              id: data.groupList.id,
+            });
+          } else {
+            await imGroupNoticeSave(params);
+          }
+          data.groupList.content = data.input;
+          data.input = "";
+          console.log(data.groupList, "groupList");
+        } catch {
+          //
+        }
       }
       data.isEdit = !data.isEdit;
     };
 
     return {
       ...toRefs(data),
-      updateProfile
+      updateProfile,
     };
-  }
+  },
 });
 export default ManageNotification;
 </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");
 .notification {
   flex: 1;
-  padding: 20Px;
+  padding: 20px;
   display: flex;
   flex-direction: column;
   section {
     flex: 1;
-    font-size: 14Px;
+    font-size: 14px;
     p {
       text-align: center;
-      padding-bottom: 20Px;
+      padding-bottom: 20px;
     }
   }
   textarea {
-    margin-bottom: 20Px;
+    margin-bottom: 20px;
     flex: 1;
     box-sizing: border-box;
-    padding: 10Px;
-    border: 1Px solid #e8e8e9;
+    padding: 10px;
+    border: 1px solid #e8e8e9;
     resize: none;
-    font-size: 14Px;
+    font-size: 14px;
   }
   footer {
     display: flex;
     justify-content: flex-end;
-    padding: 10Px;
+    padding: 10px;
   }
 }
 .btn {
   background: #3370ff;
   border: 0 solid #2f80ed;
-  padding: 4Px 28Px;
+  padding: 4px 28px;
   font-weight: 400;
-  font-size: 12Px;
+  font-size: 12px;
   color: #ffffff;
-  line-height: 24Px;
-  border-radius: 4Px;
+  line-height: 24px;
+  border-radius: 4px;
   &-cancel {
     background: #ffffff;
-    border: 1Px solid #dddddd;
+    border: 1px solid #dddddd;
     color: #828282;
   }
 }

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

@@ -1,18 +1,9 @@
 <template>
   <div>
     <i class="icon icon-chat-setting" @click="toggleShow"></i>
-    <div
-      class="manage"
-      :class="[isH5 ? 'manage-h5' : '']"
-      v-if="show"
-      ref="dialog"
-    >
+    <div class="manage" :class="[isH5 ? 'manage-h5' : '']" v-if="show" ref="dialog">
       <header class="manage-header">
-        <i
-          class="icon icon-back"
-          v-if="isH5 && !currentTab"
-          @click="toggleShow"
-        ></i>
+        <i class="icon icon-back" v-if="isH5 && !currentTab" @click="toggleShow"></i>
         <aside class="manage-header-left">
           <i class="icon icon-back" v-if="currentTab" @click="setTab('')"></i>
           <main>
@@ -23,44 +14,21 @@
           <i v-if="!isH5" class="icon icon-close" @click="toggleShow"></i>
         </span>
       </header>
-      <main
-        class="main"
-        style="background-color: #f4f5f9; height: 100%"
-        v-if="!currentTab"
-      >
-        <ManageName
-          class="space-top"
-          :isAuth="isAuth"
-          :isH5="isH5"
-          :data="conversation.groupProfile"
-          @update="updateProfile"
-          style="background-color: #fff"
-        />
+      <main class="main" style="background-color: #f4f5f9; height: 100%" v-if="!currentTab">
+        <ManageName class="space-top" :isAuth="isAuth" :isH5="isH5" :data="conversation.groupProfile" @update="updateProfile" style="background-color: #fff" />
         <div class="userInfo space-top" style="background-color: #fff">
           <header class="userInfo-header" @click="setTab('member')">
             <label>{{ $t(`TUIChat.manage.群成员`) }}</label>
             <p>
-              <span>
-                {{ conversation.groupProfile.memberCount
-                }}{{ $t(`TUIChat.manage.人`) }}
-              </span>
+              <span> {{ conversation.groupProfile.memberCount }}{{ $t(`TUIChat.manage.人`) }} </span>
               <i class="icon icon-right"></i>
             </p>
           </header>
           <ol>
-            <dl
-              v-for="(item, index) in userInfo?.list?.slice(0, showUserNum)"
-              :key="index"
-            >
-              <dt @click="handleMemberProfileShow(item)">
-                <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'"
-                />
+            <!-- @click="handleMemberProfileShow(item)" -->
+            <dl v-for="(item, index) in userInfo?.list?.slice(0, showUserNum)" :key="index">
+              <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>
             </dl>
@@ -72,11 +40,7 @@
             </dl>
           </ol>
         </div>
-        <ul
-          class="content space-top"
-          @click="editLableName = ''"
-          style="background-color: #fff"
-        >
+        <ul class="content space-top" @click="editLableName = ''" style="background-color: #fff">
           <li @click.stop="setTab('notification')">
             <aside>
               <label>{{ $t(`TUIChat.manage.群公告`) }}</label>
@@ -132,21 +96,12 @@
           </li> -->
         </ul>
         <ul class="footer space-top">
-          <li
-            v-if="
-              conversation.groupProfile.selfInfo.role === 'Owner' &&
-              userInfo?.list.length > 1
-            "
-            @click.stop="toggleMask('changeOwner')"
-          >
+          <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)"
-          >
+          <!-- <li v-if="!!isDismissGroupAuth" @click.stop="dismiss(conversation.groupProfile)">
             {{ $t(`TUIChat.manage.解散群聊`) }}
-          </li>
+          </li> -->
           <!-- <li v-else @click.stop="quit(conversation.groupProfile)">
             {{ $t(`TUIChat.manage.退出群组`) }}
           </li> -->
@@ -162,30 +117,15 @@
         @del="submit"
         @handleMemberProfileShow="handleMemberProfileShow"
       />
-      <MemeberProfile
-        v-else-if="currentTab === 'profile'"
-        :userInfo="currentMember"
-      />
-      <ManageNotification
-        v-else-if="currentTab === 'notification'"
-        :isAuth="isAuth"
-        :data="conversation.groupProfile"
-        @update="updateProfile"
-      />
+      <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'">
         <div class="admin-list" v-if="isAdmin">
           <label>{{ $t(`TUIChat.manage.群管理员`) }}</label>
           <ol>
             <dl v-for="(item, index) in member.admin" :key="index">
               <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'"
-                />
+                <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>
             </dl>
@@ -193,13 +133,7 @@
               <dt class="avatar" @click="toggleMask('addAdmin')">+</dt>
             </dl>
             <dl>
-              <dt
-                class="avatar"
-                v-if="member.admin.length > 0"
-                @click="toggleMask('removeAdmin')"
-              >
-                -
-              </dt>
+              <dt class="avatar" v-if="member.admin.length > 0" @click="toggleMask('removeAdmin')">-</dt>
             </dl>
           </ol>
         </div>
@@ -207,29 +141,17 @@
           <aside>
             <label>{{ $t(`TUIChat.manage.全员禁言`) }}</label>
             <p>
-              {{
-                $t(`TUIChat.manage.全员禁言开启后，只允许群主和管理员发言。`)
-              }}
+              {{ $t(`TUIChat.manage.全员禁言开启后，只允许群主和管理员发言。`) }}
             </p>
           </aside>
-          <Slider
-            :open="conversation.groupProfile.muteAllMembers"
-            @change="setAllMuteTime"
-          />
+          <Slider :open="conversation.groupProfile.muteAllMembers" @change="setAllMuteTime" />
         </div>
         <div class="admin-list last" v-if="isSetMuteTime">
           <label>{{ $t(`TUIChat.manage.单独禁言人员`) }}</label>
           <ol>
             <dl v-for="(item, index) in member.muteMember" :key="index">
               <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'"
-                />
+                <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>
             </dl>
@@ -237,39 +159,15 @@
               <dt class="avatar" @click="toggleMask('addMute')">+</dt>
             </dl>
             <dl>
-              <dt
-                class="avatar"
-                v-if="member.muteMember.length > 0"
-                @click="toggleMask('removeMute')"
-              >
-                -
-              </dt>
+              <dt class="avatar" v-if="member.muteMember.length > 0" @click="toggleMask('removeMute')">-</dt>
             </dl>
           </ol>
         </div>
       </main>
-      <MaskTUI :show="mask" @update:show="e => (mask = e)">
-        <Transfer
-          :title="$t(`TUIChat.manage.${transferTitle}`)"
-          :list="transferList"
-          :isSearch="isSearch"
-          :isRadio="isRadio"
-          :selectedList="selectedList"
-          @submit="submit"
-          @cancel="cancel"
-          @search="handleSearchMember"
-          :isH5="isH5"
-        />
+      <MaskTUI :show="mask" @update:show="(e) => (mask = e)">
+        <Transfer :title="$t(`TUIChat.manage.${transferTitle}`)" :list="transferList" :isSearch="isSearch" :isRadio="isRadio" :selectedList="selectedList" @submit="submit" @cancel="cancel" @search="handleSearchMember" :isH5="isH5" />
       </MaskTUI>
-      <DialogTUI
-        :title="$t(`TUIChat.manage.删除成员`)"
-        :show="delDialogShow"
-        :isH5="isH5"
-        :center="true"
-        :isHeaderShow="!isH5"
-        @submit="handleManage(userList, 'remove')"
-        @update:show="e => (delDialogShow = e)"
-      >
+      <DialogTUI :title="$t(`TUIChat.manage.删除成员`)" :show="delDialogShow" :isH5="isH5" :center="true" :isHeaderShow="!isH5" @submit="handleManage(userList, 'remove')" @update:show="(e) => (delDialogShow = e)">
         <p v-if="userList.length === 1" class="delDialog-title">
           {{ $t(`TUIChat.manage.确定从群聊中删除该成员？`) }}
         </p>
@@ -282,28 +180,20 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  watchEffect,
-  reactive,
-  toRefs,
-  computed,
-  watch,
-  ref
-} from 'vue';
-import { onClickOutside } from '@vueuse/core';
-import MaskTUI from '../../../components/maskTUI/mask.vue';
-import Transfer from '../../../components/transferTUI/index.vue';
-import Slider from '../../../components/sliderTUI/index.vue';
-import ManageName from './manage-name.vue';
-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 Vuex from 'vuex';
-import { handleErrorPrompts } from '../../utils';
-import useClipboard from 'vue-clipboard3';
+import { defineComponent, watchEffect, reactive, toRefs, computed, watch, ref } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import MaskTUI from "../../../components/maskTUI/mask.vue";
+import Transfer from "../../../components/transferTUI/index.vue";
+import Slider from "../../../components/sliderTUI/index.vue";
+import ManageName from "./manage-name.vue";
+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 Vuex from "vuex";
+import { handleErrorPrompts } from "../../utils";
+import useClipboard from "vue-clipboard3";
 
 const manage = defineComponent({
   components: {
@@ -314,28 +204,28 @@ const manage = defineComponent({
     ManageNotification,
     ManageMember,
     MemeberProfile,
-    DialogTUI
+    DialogTUI,
   },
   props: {
     userInfo: {
       type: Object,
       default: () => ({
         isGroup: false,
-        list: []
-      })
+        list: [],
+      }),
     },
     conversation: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     show: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     isH5: {
       type: Boolean,
-      default: () => false
-    }
+      default: () => false,
+    },
   },
   setup(props: any, ctx: any) {
     const types: any = manage.TUIServer.TUICore.TIM.TYPES;
@@ -345,13 +235,13 @@ const manage = defineComponent({
       conversation: {},
       userInfo: {
         isGroup: false,
-        list: []
+        list: [],
       },
       isShowMuteTimeInput: false,
-      editLableName: '',
+      editLableName: "",
       mask: false,
-      currentTab: '',
-      transferType: '',
+      currentTab: "",
+      transferType: "",
       isSearch: false,
       isRadio: false,
       transferList: [],
@@ -359,23 +249,23 @@ const manage = defineComponent({
       isMuteTime: false,
       show: false,
       typeName: {
-        [types.GRP_WORK]: '好友工作群',
-        [types.GRP_PUBLIC]: '陌生人社交群',
-        [types.GRP_MEETING]: '临时会议群',
-        [types.GRP_AVCHATROOM]: '直播群',
-        [types.JOIN_OPTIONS_FREE_ACCESS]: '自由加入',
-        [types.JOIN_OPTIONS_NEED_PERMISSION]: '需要验证',
-        [types.JOIN_OPTIONS_DISABLE_APPLY]: '禁止加群'
+        [types.GRP_WORK]: "好友工作群",
+        [types.GRP_PUBLIC]: "陌生人社交群",
+        [types.GRP_MEETING]: "临时会议群",
+        [types.GRP_AVCHATROOM]: "直播群",
+        [types.JOIN_OPTIONS_FREE_ACCESS]: "自由加入",
+        [types.JOIN_OPTIONS_NEED_PERMISSION]: "需要验证",
+        [types.JOIN_OPTIONS_DISABLE_APPLY]: "禁止加群",
       },
       delDialogShow: false,
       userList: [],
-      transferTitle: '',
+      transferTitle: "",
       member: {
         admin: [],
         member: [],
-        muteMember: []
+        muteMember: [],
       },
-      currentMember: {}
+      currentMember: {},
     });
 
     const dialog: any = ref();
@@ -386,25 +276,22 @@ const manage = defineComponent({
       data.show = props.show;
     });
 
-    const VuexStore =
-      ((window as any)?.TUIKitTUICore?.isOfficial &&
-        (Vuex as any)?.useStore()) ||
-      {};
+    const VuexStore = ((window as any)?.TUIKitTUICore?.isOfficial && (Vuex as any)?.useStore()) || {};
 
     const TabName = computed(() => {
-      let name = '';
+      let name = "";
       switch (data.currentTab) {
-        case 'notification':
-          name = '群公告';
+        case "notification":
+          name = "群公告";
           break;
-        case 'member':
-          name = '群成员';
+        case "member":
+          name = "群成员";
           break;
-        case 'profile':
-          name = '群成员';
+        case "profile":
+          name = "群成员";
           break;
         default:
-          name = '群管理';
+          name = "群管理";
           break;
       }
       return name;
@@ -416,7 +303,7 @@ const manage = defineComponent({
         data.member = {
           admin: [],
           member: [],
-          muteMember: []
+          muteMember: [],
         };
         newValue.map((item: any) => {
           switch (item?.role) {
@@ -432,9 +319,7 @@ const manage = defineComponent({
           return item;
         });
         const time: number = new Date().getTime();
-        data.member.muteMember = newValue.filter(
-          (item: any) => item?.muteUntil * 1000 - time > 0
-        );
+        data.member.muteMember = newValue.filter((item: any) => item?.muteUntil * 1000 - time > 0);
       },
       { deep: true }
     );
@@ -466,7 +351,7 @@ const manage = defineComponent({
       if (!isShowAddMember.value) {
         num += 1;
       }
-      if ((data.conversation as any).groupProfile.selfInfo.role !== 'Owner') {
+      if ((data.conversation as any).groupProfile.selfInfo.role !== "Owner") {
         num += 1;
       }
       return num;
@@ -513,10 +398,10 @@ const manage = defineComponent({
       const options: any = {
         groupID: conversation?.groupProfile?.groupID,
         count: 100,
-        offset: type && type === 'more' ? data.userInfo.list.length : 0
+        offset: type && type === "more" ? data.userInfo.list.length : 0,
       };
       GroupServer.getGroupMemberList(options).then((res: any) => {
-        if (type && type === 'more') {
+        if (type && type === "more") {
           data.userInfo.list = [...data.userInfo.list, ...res.data.memberList];
         } else {
           data.userInfo.list = res.data.memberList;
@@ -528,17 +413,17 @@ const manage = defineComponent({
       const { conversation } = data;
       const options: any = {
         groupID: conversation.groupProfile.groupID,
-        userIDList
+        userIDList,
       };
       await GroupServer.addGroupMember(options);
-      getMember('More');
+      getMember("More");
     };
 
     const deleteMember = (user: any) => {
       const { conversation } = data;
       const options: any = {
         groupID: conversation.groupProfile.groupID,
-        userIDList: [user.userID]
+        userIDList: [user.userID],
       };
       GroupServer.deleteGroupMember(options);
     };
@@ -546,11 +431,18 @@ const manage = defineComponent({
     const changeOwner = async (userID: any) => {
       const options: any = {
         groupID: data.conversation.groupProfile.groupID,
-        newOwnerID: userID
+        newOwnerID: userID,
       };
       const imResponse = await GroupServer.changeGroupOwner(options);
       data.conversation.groupProfile = {};
       data.conversation.groupProfile = imResponse.data.group;
+
+      // 腾讯IM切换人之后
+      await imGroupChangeGroupOwner({
+        oldOwner: data.conversation.groupProfile.ownerID,
+        groupId: data.conversation.groupProfile.groupID,
+        newOwner: userID,
+      });
     };
 
     const quit = async (group: any) => {
@@ -561,14 +453,12 @@ const manage = defineComponent({
     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);
+      (window as any)?.TUIKitTUICore?.isOfficial && VuexStore?.commit && VuexStore?.commit("handleTask", 5);
     };
 
     const handleAdmin = async (user: any) => {
       const { conversation } = data;
-      let role = '';
+      let role = "";
       switch (user.role) {
         case types.GRP_MBR_ROLE_ADMIN:
           role = types.GRP_MBR_ROLE_MEMBER;
@@ -580,7 +470,7 @@ const manage = defineComponent({
       const options: any = {
         groupID: conversation.groupProfile.groupID,
         userID: user.userID,
-        role
+        role,
       };
       await GroupServer.setGroupMemberRole(options);
       getMember();
@@ -591,13 +481,11 @@ const manage = defineComponent({
       const options: any = {
         groupID: conversation.groupProfile.groupID,
         userID,
-        muteTime: type === 'add' ? 60 * 60 * 24 * 30 : 0
+        muteTime: type === "add" ? 60 * 60 * 24 * 30 : 0,
       };
       await GroupServer.setGroupMemberMuteTime(options);
-      if (type === 'add') {
-        (window as any)?.TUIKitTUICore?.isOfficial &&
-          VuexStore?.commit &&
-          VuexStore?.commit('handleTask', 4);
+      if (type === "add") {
+        (window as any)?.TUIKitTUICore?.isOfficial && VuexStore?.commit && VuexStore?.commit("handleTask", 4);
       }
       getMember();
     };
@@ -607,7 +495,7 @@ const manage = defineComponent({
       const options: any = {
         groupID: conversation.groupProfile.groupID,
         userIDList,
-        reason: ''
+        reason: "",
       };
       await GroupServer.deleteGroupMember(options);
       getMember();
@@ -621,24 +509,24 @@ const manage = defineComponent({
       const { key, value } = params;
       const options: any = {
         groupID: data.conversation.groupProfile.groupID,
-        [key]: value
+        [key]: value,
       };
       const res = await GroupServer.updateGroupProfile(options);
       const { conversation } = manage.TUIServer.store;
       conversation.groupProfile = res.data.group;
       manage.TUIServer.store.conversation = {};
       manage.TUIServer.store.conversation = conversation;
-      data.editLableName = '';
+      data.editLableName = "";
     };
 
     const setTab = (tabName: string) => {
       data.currentTab = tabName;
-      data.editLableName = '';
-      if (data.currentTab === 'member') {
-        data.transferType = 'remove';
+      data.editLableName = "";
+      if (data.currentTab === "member") {
+        data.transferType = "remove";
       }
       if (!data.currentTab) {
-        data.transferType = '';
+        data.transferType = "";
       }
     };
 
@@ -647,36 +535,32 @@ const manage = defineComponent({
       let imMemberResponse: any = {};
       const options: any = {
         groupID: data.conversation.groupProfile.groupID,
-        userIDList: [value]
+        userIDList: [value],
       };
       switch (data.transferType) {
-        case 'add':
+        case "add":
           try {
             imMemberResponse = await GroupServer.getGroupMemberProfile(options);
-            data.transferList = data.transferList.filter(
-              (item: any) => item.userID !== imResponse.data[0]?.userID
-            );
+            data.transferList = data.transferList.filter((item: any) => item.userID !== imResponse.data[0]?.userID);
             data.transferList = [...data.transferList, ...imResponse.data];
             if (imMemberResponse?.data?.memberList.length > 0) {
               data.transferList = data.transferList.map((item: any) => {
-                if (
-                  item.userID === imMemberResponse?.data?.memberList[0].userID
-                ) {
+                if (item.userID === imMemberResponse?.data?.memberList[0].userID) {
                   item.isDisabled = true;
                 }
                 return item;
               });
             }
           } catch (error) {
-            const message = t('TUIChat.manage.该用户不存在');
+            const message = t("TUIChat.manage.该用户不存在");
             handleErrorPrompts(message, props);
           }
           break;
-        case 'remove':
+        case "remove":
           try {
             imResponse = await GroupServer.getGroupMemberProfile(options);
             if (imResponse.data.memberList.length === 0) {
-              const message = t('TUIChat.manage.该用户不在群组内');
+              const message = t("TUIChat.manage.该用户不在群组内");
               return handleErrorPrompts(message, props);
             }
             data.transferList = data.transferList.filter(
@@ -687,10 +571,10 @@ const manage = defineComponent({
             data.transferList = [
               ...data.transferList,
               // eslint-disable-next-line no-unsafe-optional-chaining
-              ...imResponse?.data?.memberList
+              ...imResponse?.data?.memberList,
             ];
           } catch (error) {
-            const message = t('TUIChat.manage.该用户不存在');
+            const message = t("TUIChat.manage.该用户不存在");
             handleErrorPrompts(message, props);
           }
           break;
@@ -700,7 +584,7 @@ const manage = defineComponent({
     };
 
     const submit = (userList: any) => {
-      if (data.transferType === 'remove') {
+      if (data.transferType === "remove") {
         data.userList = userList;
         data.delDialogShow = !data.delDialogShow;
       } else {
@@ -712,12 +596,7 @@ 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
-          )
-      );
+      return friendList.filter((item: any) => !data.userInfo.list.some((infoItem: any) => infoItem.userID === item.userID));
     };
 
     const cancel = () => {
@@ -727,47 +606,53 @@ const manage = defineComponent({
     const toggleMask = async (type?: string) => {
       data.selectedList = [];
       switch (type) {
-        case 'add':
+        case "add":
           data.isRadio = false;
           data.transferList = await friendList();
-          data.transferTitle = '添加成员';
+          data.transferTitle = "添加成员";
           break;
-        case 'remove':
+        case "remove":
           data.isRadio = false;
           data.transferList = data.userInfo.list.filter(
             (item: any) =>
               // eslint-disable-next-line no-unsafe-optional-chaining
               item.userID !== data.conversation?.groupProfile?.selfInfo.userID
           );
-          data.transferTitle = '删除成员';
+          data.transferTitle = "删除成员";
           break;
-        case 'addAdmin':
+        case "addAdmin":
           data.isRadio = true;
           data.transferList = data.member.member;
-          data.transferTitle = '新增管理员';
+          data.transferTitle = "新增管理员";
           break;
-        case 'removeAdmin':
+        case "removeAdmin":
           data.isRadio = true;
           data.transferList = data.member.admin;
-          data.transferTitle = '移除管理员';
+          data.transferTitle = "移除管理员";
           break;
-        case 'changeOwner':
+        case "changeOwner":
           data.isRadio = true;
-          data.transferList = [...data.member.admin, ...data.member.member];
-          data.transferTitle = '转让群组';
+          const tempList: any = [...data.member.admin, ...data.member.member];
+          tempList.forEach((item: any) => {
+            if (item.userID.indexOf("STUDENT") == -1) {
+              data.transferList.push(item);
+            }
+          });
+          data.transferTitle = "转让群组";
+          console.log(data.transferList, "data.transferList");
           break;
-        case 'addMute':
+        case "addMute":
           data.isRadio = true;
           data.transferList = data.member.member;
-          if (data.conversation.groupProfile.selfInfo.role === 'Owner') {
+          if (data.conversation.groupProfile.selfInfo.role === "Owner") {
             data.transferList = [...data.member.admin, ...data.member.member];
           }
-          data.transferTitle = '新增禁言用户';
+          data.transferTitle = "新增禁言用户";
           break;
-        case 'removeMute':
+        case "removeMute":
           data.isRadio = true;
           data.transferList = data.member.muteMember;
-          data.transferTitle = '移除禁言用户';
+          data.transferTitle = "移除禁言用户";
           break;
         default:
           break;
@@ -782,12 +667,12 @@ const manage = defineComponent({
 
     const toggleShow = () => {
       if (!GroupServer) {
-        const message = t('TUIChat.manage.请先注册 TUIGroup 模块');
+        const message = t("TUIChat.manage.请先注册 TUIGroup 模块");
         return handleErrorPrompts(message, props);
       }
       data.show = !data.show;
       if (!data.show) {
-        data.currentTab = '';
+        data.currentTab = "";
       }
       if (data.show) {
         getMember();
@@ -795,10 +680,8 @@ const manage = defineComponent({
     };
 
     const setAllMuteTime = (value: boolean) => {
-      updateProfile({ key: 'muteAllMembers', value });
-      (window as any)?.TUIKitTUICore?.isOfficial &&
-        VuexStore?.commit &&
-        VuexStore?.commit('handleTask', 4);
+      updateProfile({ key: "muteAllMembers", value });
+      (window as any)?.TUIKitTUICore?.isOfficial && VuexStore?.commit && VuexStore?.commit("handleTask", 4);
     };
 
     const handleManage = (userList: any, type: any) => {
@@ -808,26 +691,26 @@ const manage = defineComponent({
         return item;
       });
       switch (type) {
-        case 'add':
+        case "add":
           addMember(userIDList);
           break;
-        case 'remove':
+        case "remove":
           kickedOut(userIDList);
           break;
-        case 'addAdmin':
+        case "addAdmin":
           handleAdmin(userList[0]);
           break;
-        case 'removeAdmin':
+        case "removeAdmin":
           handleAdmin(userList[0]);
           break;
-        case 'changeOwner':
+        case "changeOwner":
           changeOwner(userIDList[0]);
           break;
-        case 'addMute':
-          setMemberMuteTime(userIDList[0], 'add');
+        case "addMute":
+          setMemberMuteTime(userIDList[0], "add");
           break;
-        case 'removeMute':
-          setMemberMuteTime(userIDList[0], 'remove');
+        case "removeMute":
+          setMemberMuteTime(userIDList[0], "remove");
           break;
         default:
           break;
@@ -845,7 +728,7 @@ const manage = defineComponent({
 
     const handleMemberProfileShow = (user: any) => {
       data.currentMember = user;
-      setTab('profile');
+      setTab("profile");
     };
 
     return {
@@ -878,9 +761,9 @@ const manage = defineComponent({
       showUserNum,
       dialog,
       handleGroupIDCopy,
-      handleMemberProfileShow
+      handleMemberProfileShow,
     };
-  }
+  },
 });
 export default manage;
 </script>

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

@@ -7,9 +7,9 @@
   border-radius: 8Px 0 0 8Px;
   position: absolute;
   right: 0;
-  height: 100%;
+  height: calc(100% - 54px);
   z-index: 2;
-  top: 0Px;
+  top: 54Px;
 
   &-header {
     padding: 12Px;

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

@@ -1,27 +1,21 @@
-import { formatTime } from '../../../utils/date';
-import { decodeText } from './decodeText';
-import TIM from '../../../../TUICore/tim';
-import constant from '../../constant';
-import { Message } from '../interface';
+import { formatTime } from "../../../utils/date";
+import { decodeText } from "./decodeText";
+import TIM from "../../../../TUICore/tim";
+import constant from "../../constant";
+import { Message } from "../interface";
 
 // Handling avatars
 export function handleAvatar(item: any) {
-  let avatar = '';
+  let avatar = "";
   switch (item.type) {
     case TIM.TYPES.CONV_C2C:
-      avatar = isUrl(item?.userProfile?.avatar)
-        ? item?.userProfile?.avatar
-        : 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png';
+      avatar = isUrl(item?.userProfile?.avatar) ? item?.userProfile?.avatar : "https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png";
       break;
     case TIM.TYPES.CONV_GROUP:
-      avatar = isUrl(item?.groupProfile?.avatar)
-        ? item?.groupProfile?.avatar
-        : 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png';
+      avatar = isUrl(item?.groupProfile?.avatar) ? item?.groupProfile?.avatar : "https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png";
       break;
     case TIM.TYPES.CONV_SYSTEM:
-      avatar = isUrl(item?.groupProfile?.avatar)
-        ? item?.groupProfile?.avatar
-        : 'https://web.sdk.qcloud.com/component/TUIKit/assets/group_avatar.png';
+      avatar = isUrl(item?.groupProfile?.avatar) ? item?.groupProfile?.avatar : "https://web.sdk.qcloud.com/component/TUIKit/assets/group_avatar.png";
       break;
   }
   return avatar;
@@ -30,16 +24,16 @@ export function handleAvatar(item: any) {
 // Handling names
 export function handleName(item: any) {
   const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
-  let name = '';
+  let name = "";
   switch (item.type) {
     case TIM.TYPES.CONV_C2C:
-      name = item?.userProfile.nick || item?.userProfile?.userID || '';
+      name = item?.userProfile.nick || item?.userProfile?.userID || "";
       break;
     case TIM.TYPES.CONV_GROUP:
-      name = item.groupProfile.name || item?.groupProfile?.groupID || '';
+      name = item.groupProfile.name || item?.groupProfile?.groupID || "";
       break;
     case TIM.TYPES.CONV_SYSTEM:
-      name = t('系统通知');
+      name = t("系统通知");
       break;
   }
   return name;
@@ -47,12 +41,8 @@ export function handleName(item: any) {
 // Handle whether there is someone@
 export function handleAt(item: any) {
   const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
-  const List: any = [
-    `[${t('TUIConversation.有人@我')}]`,
-    `[${t('TUIConversation.@所有人')}]`,
-    `[${t('TUIConversation.@所有人')}][${t('TUIConversation.有人@我')}]`
-  ];
-  let showAtType = '';
+  const List: any = [`[${t("TUIConversation.有人@我")}]`, `[${t("TUIConversation.@所有人")}]`, `[${t("TUIConversation.@所有人")}][${t("TUIConversation.有人@我")}]`];
+  let showAtType = "";
   for (let index = 0; index < item.groupAtInfoList.length; index++) {
     if (item.groupAtInfoList[index].atTypeArray[0] && item.unreadCount > 0) {
       showAtType = List[item.groupAtInfoList[index].atTypeArray[0] - 1];
@@ -63,8 +53,8 @@ export function handleAt(item: any) {
 
 export function handleReferenceForShow(message: any) {
   const data = {
-    referenceMessageForShow: '',
-    referenceMessageType: 0
+    referenceMessageForShow: "",
+    referenceMessageType: 0,
   };
   if (!message || !message?.ID || !message?.type) return data;
   switch (message.type) {
@@ -73,27 +63,27 @@ export function handleReferenceForShow(message: any) {
       data.referenceMessageType = 1;
       break;
     case TIM.TYPES.MSG_CUSTOM:
-      data.referenceMessageForShow = '[自定义消息]';
+      data.referenceMessageForShow = "[自定义消息]";
       data.referenceMessageType = 2;
       break;
     case TIM.TYPES.MSG_IMAGE:
-      data.referenceMessageForShow = '[图片]';
+      data.referenceMessageForShow = "[图片]";
       data.referenceMessageType = 3;
       break;
     case TIM.TYPES.MSG_AUDIO:
-      data.referenceMessageForShow = '[语音]';
+      data.referenceMessageForShow = "[语音]";
       data.referenceMessageType = 4;
       break;
     case TIM.TYPES.MSG_VIDEO:
-      data.referenceMessageForShow = '[视频]';
+      data.referenceMessageForShow = "[视频]";
       data.referenceMessageType = 5;
       break;
     case TIM.TYPES.MSG_FILE:
-      data.referenceMessageForShow = '[文件]';
+      data.referenceMessageForShow = "[文件]";
       data.referenceMessageType = 6;
       break;
     case TIM.TYPES.MSG_FACE:
-      data.referenceMessageForShow = '[表情]';
+      data.referenceMessageForShow = "[表情]";
       data.referenceMessageType = 8;
       break;
   }
@@ -105,25 +95,16 @@ export function handleShowLastMessage(item: any) {
   const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
   const { lastMessage } = item;
   const conversation = item;
-  let showNick = '';
-  let lastMessagePayload = '';
+  let showNick = "";
+  let lastMessagePayload = "";
   // Judge the number of unread messages and display them only when the message is enabled without interruption.
-  const showUnreadCount =
-    conversation.unreadCount > 0 &&
-    conversation.messageRemindType === TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE
-      ? `[${
-          conversation.unreadCount > 99 ? '99+' : conversation.unreadCount
-        }${t('TUIConversation.条')}] `
-      : '';
+  const showUnreadCount = conversation.unreadCount > 0 && conversation.messageRemindType === TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE ? `[${conversation.unreadCount > 99 ? "99+" : conversation.unreadCount}${t("TUIConversation.条")}] ` : "";
   // Determine the lastmessage sender of the group. Namecard / Nick / userid is displayed by priority
   if (conversation.type === TIM.TYPES.CONV_GROUP) {
-    if (
-      lastMessage?.fromAccount === conversation?.groupProfile.selfInfo.userID
-    ) {
-      showNick = t('TUIConversation.我');
+    if (lastMessage?.fromAccount === conversation?.groupProfile.selfInfo.userID) {
+      showNick = t("TUIConversation.我");
     } else {
-      showNick =
-        lastMessage?.nameCard || lastMessage?.nick || lastMessage?.fromAccount;
+      showNick = lastMessage?.nameCard || lastMessage?.nick || lastMessage?.fromAccount;
     }
   }
   // Display content of lastmessage message body
@@ -141,18 +122,13 @@ export function handleShowLastMessage(item: any) {
   }
 
   if (lastMessage?.isRevoked) {
-    lastMessagePayload = t('TUIChat.撤回了一条消息');
+    lastMessagePayload = t("TUIChat.撤回了一条消息");
   }
-  if (
-    conversation.type === TIM.TYPES.CONV_GROUP &&
-    lastMessage?.type === TIM.TYPES.MSG_GRP_TIP
-  ) {
+  if (conversation.type === TIM.TYPES.CONV_GROUP && lastMessage?.type === TIM.TYPES.MSG_GRP_TIP) {
     return lastMessagePayload;
   }
   // Specific display content of message box
-  return `${showUnreadCount}${
-    showNick ? `${showNick}:` : ''
-  }${lastMessagePayload}`;
+  return `${showUnreadCount}${showNick ? `${showNick}:` : ""}${lastMessagePayload}`;
 }
 
 // Handling system tip message display
@@ -160,11 +136,11 @@ export function handleTipMessageShowContext(message: any) {
   const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
   const options: any = {
     message,
-    text: ''
+    text: "",
   };
-  let userName = message?.nick || message?.payload?.userIDList?.join(',');
+  let userName = message?.nick || message?.payload?.userIDList?.join(",");
   if (message?.payload?.memberList?.length > 0) {
-    userName = '';
+    userName = "";
     message?.payload?.memberList?.map((user: any) => {
       userName += `${user?.nick || user?.userID},`;
     });
@@ -173,27 +149,19 @@ export function handleTipMessageShowContext(message: any) {
   if (message?.type === TIM?.TYPES?.MSG_GRP_TIP) {
     switch (message.payload.operationType) {
       case TIM.TYPES.GRP_TIP_MBR_JOIN:
-        options.text = `${userName} ${t('message.tip.加入群组')}`;
+        options.text = `${userName} ${t("message.tip.加入群组")}`;
         break;
       case TIM.TYPES.GRP_TIP_MBR_QUIT:
-        options.text = `${t('message.tip.群成员')}：${userName} ${t(
-          'message.tip.退出群组'
-        )}`;
+        options.text = `${t("message.tip.群成员")}：${userName} ${t("message.tip.退出群组")}`;
         break;
       case TIM.TYPES.GRP_TIP_MBR_KICKED_OUT:
-        options.text = `${t('message.tip.群成员')}：${userName} ${t(
-          'message.tip.被'
-        )}${message.payload.operatorID}${t('message.tip.踢出群组')}`;
+        options.text = `${t("message.tip.群成员")}：${userName} ${t("message.tip.被")}${message.payload.operatorID}${t("message.tip.踢出群组")}`;
         break;
       case TIM.TYPES.GRP_TIP_MBR_SET_ADMIN:
-        options.text = `${t('message.tip.群成员')}：${userName} ${t(
-          'message.tip.成为管理员'
-        )}`;
+        options.text = `${t("message.tip.群成员")}：${userName} ${t("message.tip.成为管理员")}`;
         break;
       case TIM.TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
-        options.text = `${t('message.tip.群成员')}：${userName} ${t(
-          'message.tip.被撤销管理员'
-        )}`;
+        options.text = `${t("message.tip.群成员")}：${userName} ${t("message.tip.被撤销管理员")}`;
         break;
       case TIM.TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
         // options.text =  `${userName} 修改群组资料`;
@@ -202,23 +170,17 @@ export function handleTipMessageShowContext(message: any) {
       case TIM.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
         for (const member of message.payload.memberList) {
           if (member.muteTime > 0) {
-            options.text = `${t('message.tip.群成员')}：${member.userID}${t(
-              'message.tip.被禁言'
-            )}`;
+            options.text = `${t("message.tip.群成员")}：${member.userID}${t("message.tip.被禁言")}`;
           } else {
-            options.text = `${t('message.tip.群成员')}：${member.userID}${t(
-              'message.tip.被取消禁言'
-            )}`;
+            options.text = `${t("message.tip.群成员")}：${member.userID}${t("message.tip.被取消禁言")}`;
           }
         }
         break;
       default:
-        options.text = `[${t('message.tip.群提示消息')}]`;
+        options.text = `[${t("message.tip.群提示消息")}]`;
         break;
     }
-  } else if (
-    JSONToObject(message?.payload?.data)?.businessID === 'group_create'
-  ) {
+  } else if (JSONToObject(message?.payload?.data)?.businessID === "group_create") {
     const data = JSONToObject(message?.payload?.data);
     options.text = `"${data?.opUser}" ` + t(data?.content);
   } else {
@@ -232,25 +194,19 @@ function handleTipGrpUpdated(message: any) {
   const { payload } = message;
   const { newGroupProfile } = payload;
   const { operatorID } = payload;
-  let text = '';
-  if ('muteAllMembers' in newGroupProfile) {
-    if (newGroupProfile['muteAllMembers']) {
-      text = `${t('message.tip.管理员')} ${operatorID} ${t(
-        'message.tip.开启全员禁言'
-      )}`;
+  let text = "";
+  if ("muteAllMembers" in newGroupProfile) {
+    if (newGroupProfile["muteAllMembers"]) {
+      text = `${t("message.tip.管理员")} ${operatorID} ${t("message.tip.开启全员禁言")}`;
     } else {
-      text = `${t('message.tip.管理员')} ${operatorID} ${t(
-        'message.tip.取消全员禁言'
-      )}`;
+      text = `${t("message.tip.管理员")} ${operatorID} ${t("message.tip.取消全员禁言")}`;
     }
-  } else if ('ownerID' in newGroupProfile) {
-    text = `${newGroupProfile['ownerID']} ${t('message.tip.成为新的群主')}`;
-  } else if ('groupName' in newGroupProfile) {
-    text = `${operatorID} ${t('message.tip.修改群名为')} ${
-      newGroupProfile['groupName']
-    }`;
-  } else if ('notification' in newGroupProfile) {
-    text = `${operatorID} ${t('message.tip.发布新公告')}`;
+  } else if ("ownerID" in newGroupProfile) {
+    text = `${newGroupProfile["ownerID"]} ${t("message.tip.成为新的群主")}`;
+  } else if ("groupName" in newGroupProfile) {
+    text = `${operatorID} ${t("message.tip.修改群名为")} ${newGroupProfile["groupName"]}`;
+  } else if ("notification" in newGroupProfile) {
+    text = `${operatorID} ${t("message.tip.发布新公告")}`;
   }
   return text;
 }
@@ -258,7 +214,7 @@ function handleTipGrpUpdated(message: any) {
 // Parsing and handling text message display
 export function handleTextMessageShowContext(item: any) {
   const options: any = {
-    text: decodeText(item.payload)
+    text: decodeText(item.payload),
   };
   return options;
 }
@@ -267,11 +223,11 @@ export function handleTextMessageShowContext(item: any) {
 export function handleFaceMessageShowContext(item: any) {
   const face: any = {
     message: item,
-    name: '',
-    url: ''
+    name: "",
+    url: "",
   };
   face.name = item.payload.data;
-  if (item.payload.data.indexOf('@2x') < 0) {
+  if (item.payload.data.indexOf("@2x") < 0) {
     face.name = `${face.name}@2x`;
   }
   face.url = `https://web.sdk.qcloud.com/im/assets/face-elem/${face.name}.png`;
@@ -281,23 +237,17 @@ export function handleFaceMessageShowContext(item: any) {
 // Parsing and handling location message display
 export function handleLocationMessageShowContext(item: any) {
   const location: any = {
-    lon: '',
-    lat: '',
-    href: '',
-    url: '',
-    description: '',
-    message: item
+    lon: "",
+    lat: "",
+    href: "",
+    url: "",
+    description: "",
+    message: item,
   };
   location.lon = item.payload.longitude.toFixed(6);
   location.lat = item.payload.latitude.toFixed(6);
-  location.href =
-    'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&' +
-    `pointx=${location.lon}&pointy=${location.lat}&name=${item.payload.description}`;
-  location.url =
-    'https://apis.map.qq.com/ws/staticmap/v2/?' +
-    `center=${location.lat},${location.lon}&zoom=10&size=300*150&maptype=roadmap&` +
-    `markers=size:large|color:0xFFCCFF|label:k|${location.lat},${location.lon}&` +
-    'key=UBNBZ-PTP3P-TE7DB-LHRTI-Y4YLE-VWBBD';
+  location.href = "https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&" + `pointx=${location.lon}&pointy=${location.lat}&name=${item.payload.description}`;
+  location.url = "https://apis.map.qq.com/ws/staticmap/v2/?" + `center=${location.lat},${location.lon}&zoom=10&size=300*150&maptype=roadmap&` + `markers=size:large|color:0xFFCCFF|label:k|${location.lat},${location.lon}&` + "key=UBNBZ-PTP3P-TE7DB-LHRTI-Y4YLE-VWBBD";
   location.description = item.payload.description;
   return location;
 }
@@ -305,39 +255,39 @@ export function handleLocationMessageShowContext(item: any) {
 // Parsing and handling image message display
 export function handleImageMessageShowContext(item: any) {
   return {
-    progress: item?.status === 'unSend' && item.progress,
+    progress: item?.status === "unSend" && item.progress,
     url: item.payload.imageInfoArray[1].url,
     width: item.payload.imageInfoArray[0].width,
     height: item.payload.imageInfoArray[0].height,
-    message: item
+    message: item,
   };
 }
 
 // Parsing and handling video message display
 export function handleVideoMessageShowContext(item: any) {
   return {
-    progress: item?.status === 'unSend' && item?.progress,
+    progress: item?.status === "unSend" && item?.progress,
     url: item?.payload?.videoUrl,
     snapshotUrl: item?.payload?.snapshotUrl,
     snapshotWidth: item?.payload?.snapshotWidth,
     snapshotHeight: item?.payload?.snapshotHeight,
-    message: item
+    message: item,
   };
 }
 
 // Parsing and handling audio message display
 export function handleAudioMessageShowContext(item: any) {
   return {
-    progress: item?.status === 'unSend' && item.progress,
+    progress: item?.status === "unSend" && item.progress,
     url: item.payload.url,
     message: item,
-    second: item.payload.second
+    second: item.payload.second,
   };
 }
 
 // Parsing and handling file message display
 export function handleFileMessageShowContext(item: any) {
-  let size = '';
+  let size = "";
   if (item.payload.fileSize >= 1024 * 1024) {
     size = `${(item.payload.fileSize / (1024 * 1024)).toFixed(2)} Mb`;
   } else if (item.payload.fileSize >= 1024) {
@@ -346,11 +296,11 @@ export function handleFileMessageShowContext(item: any) {
     size = `${item.payload.fileSize.toFixed(2)}B`;
   }
   return {
-    progress: item?.status === 'unSend' && item.progress,
+    progress: item?.status === "unSend" && item.progress,
     url: item.payload.fileUrl,
     message: item,
     name: item.payload.fileName,
-    size
+    size,
   };
 }
 
@@ -370,14 +320,14 @@ export function extractCallingInfoFromMessage(message: any) {
     callingMessage = {};
   }
   if (callingMessage.businessID !== 1) {
-    return '';
+    return "";
   }
   try {
     objectData = JSONToObject(callingMessage.data);
   } catch (error) {
     objectData = {};
   }
-  let inviteeList = '';
+  let inviteeList = "";
   callingMessage?.inviteeList?.forEach((userID: string, index: number) => {
     if (index < callingMessage?.inviteeList?.length - 1) {
       inviteeList += `"${userID}"、`;
@@ -389,54 +339,44 @@ export function extractCallingInfoFromMessage(message: any) {
   switch (callingMessage.actionType) {
     case 1: {
       if (objectData.call_end >= 0 && !callingMessage.groupID) {
-        return `${t('message.custom.通话时长')}：${formatTime(
-          objectData.call_end
-        )}`;
+        return `${t("message.custom.通话时长")}：${formatTime(objectData.call_end)}`;
       }
       if (callingMessage.groupID && callingMessage.timeout > 0) {
-        return `${inviter}${t('message.custom.发起通话')}`;
+        return `${inviter}${t("message.custom.发起通话")}`;
       }
       if (callingMessage.groupID) {
-        return `${t('message.custom.结束群聊')}`;
+        return `${t("message.custom.结束群聊")}`;
       }
-      if (objectData.data && objectData.data.cmd === 'switchToAudio') {
-        return `${t('message.custom.切换语音通话')}`;
+      if (objectData.data && objectData.data.cmd === "switchToAudio") {
+        return `${t("message.custom.切换语音通话")}`;
       }
-      if (objectData.data && objectData.data.cmd === 'switchToVideo') {
-        return `${t('message.custom.切换视频通话')}`;
+      if (objectData.data && objectData.data.cmd === "switchToVideo") {
+        return `${t("message.custom.切换视频通话")}`;
       }
-      return `${t('message.custom.发起通话')}`;
+      return `${t("message.custom.发起通话")}`;
     }
     case 2:
-      return `${callingMessage.groupID ? inviter : ''}${t(
-        'message.custom.取消通话'
-      )}`;
+      return `${callingMessage.groupID ? inviter : ""}${t("message.custom.取消通话")}`;
     case 3:
-      if (objectData.data && objectData.data.cmd === 'switchToAudio') {
-        return `${t('message.custom.切换语音通话')}`;
+      if (objectData.data && objectData.data.cmd === "switchToAudio") {
+        return `${t("message.custom.切换语音通话")}`;
       }
-      if (objectData.data && objectData.data.cmd === 'switchToVideo') {
-        return `${t('message.custom.切换视频通话')}`;
+      if (objectData.data && objectData.data.cmd === "switchToVideo") {
+        return `${t("message.custom.切换视频通话")}`;
       }
-      return `${callingMessage.groupID ? inviteeList : ''}${t(
-        'message.custom.已接听'
-      )}`;
+      return `${callingMessage.groupID ? inviteeList : ""}${t("message.custom.已接听")}`;
     case 4:
-      return `${callingMessage.groupID ? inviteeList : ''}${t(
-        'message.custom.拒绝通话'
-      )}`;
+      return `${callingMessage.groupID ? inviteeList : ""}${t("message.custom.拒绝通话")}`;
     case 5:
-      if (objectData.data && objectData.data.cmd === 'switchToAudio') {
-        return `${t('message.custom.切换语音通话')}`;
+      if (objectData.data && objectData.data.cmd === "switchToAudio") {
+        return `${t("message.custom.切换语音通话")}`;
       }
-      if (objectData.data && objectData.data.cmd === 'switchToVideo') {
-        return `${t('message.custom.切换视频通话')}`;
+      if (objectData.data && objectData.data.cmd === "switchToVideo") {
+        return `${t("message.custom.切换视频通话")}`;
       }
-      return `${callingMessage.groupID ? inviteeList : ''}${t(
-        'message.custom.无应答'
-      )}`;
+      return `${callingMessage.groupID ? inviteeList : ""}${t("message.custom.无应答")}`;
     default:
-      return '';
+      return "";
   }
 }
 
@@ -452,70 +392,43 @@ export function handleCustomMessageShowContext(item: any) {
   }
   return {
     message: item,
-    custom:
-      extractCallingInfoFromMessage(item) ||
-      `[${t('message.custom.自定义消息')}]`
+    custom: extractCallingInfoFromMessage(item) || `[${t("message.custom.自定义消息")}]`,
   };
 }
 
 // Parsing and handling system message display
 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}`;
   }
 }
 
@@ -542,16 +455,14 @@ export function getImgLoad(container: any, className: string, callback: any) {
     .then(() => {
       callback && callback();
     })
-    .catch(e => {
-      console.error('网络异常', e);
+    .catch((e) => {
+      console.error("网络异常", e);
     });
 }
 
 // Determine whether it is url
 export function isUrl(url: string) {
-  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(
-    url
-  );
+  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(url);
 }
 
 // Handling custom message options
@@ -559,14 +470,14 @@ export function handleOptions(businessID: string, version: number, other: any) {
   return {
     businessID,
     version,
-    ...other
+    ...other,
   };
 }
 
 // Determine if it is a JSON string
 export function isJSON(str: string) {
   // eslint-disable-next-line no-useless-escape
-  if (typeof str === 'string') {
+  if (typeof str === "string") {
     try {
       const data = JSON.parse(str);
       if (data) {
@@ -601,17 +512,17 @@ export function isTypingMessage(item: any) {
 }
 
 export function deepCopy(data: any, hash = new WeakMap()) {
-  if (typeof data !== 'object' || data === null) {
-    throw new TypeError('传入参数不是对象');
+  if (typeof data !== "object" || data === null) {
+    throw new TypeError("传入参数不是对象");
   }
   if (hash.has(data)) {
     return hash.get(data);
   }
   const newData: any = Object.create(Object.getPrototypeOf(data));
   const dataKeys = Object.keys(data);
-  dataKeys.forEach(value => {
+  dataKeys.forEach((value) => {
     const currentDataValue = data[value];
-    if (typeof currentDataValue !== 'object' || currentDataValue === null) {
+    if (typeof currentDataValue !== "object" || currentDataValue === null) {
       newData[value] = currentDataValue;
     } else if (Array.isArray(currentDataValue)) {
       newData[value] = [...currentDataValue];
@@ -641,35 +552,20 @@ export const throttle = (fn: any): (() => void) => {
 export const isMessageTip = (message: Message) => {
   if (
     message?.type === TIM?.TYPES?.MSG_GRP_TIP ||
-    (message?.type === TIM?.TYPES?.MSG_CUSTOM &&
-      message?.conversationType === TIM?.TYPES?.CONV_GROUP &&
-      JSONToObject(message?.payload?.data)?.businessID ===
-        constant?.TYPE_CALL_MESSAGE) ||
-    (message?.type === TIM?.TYPES?.MSG_CUSTOM &&
-      message?.conversationType === TIM?.TYPES?.CONV_GROUP &&
-      JSONToObject(message?.payload?.data)?.businessID === 'group_create')
+    (message?.type === TIM?.TYPES?.MSG_CUSTOM && message?.conversationType === TIM?.TYPES?.CONV_GROUP && JSONToObject(message?.payload?.data)?.businessID === constant?.TYPE_CALL_MESSAGE) ||
+    (message?.type === TIM?.TYPES?.MSG_CUSTOM && message?.conversationType === TIM?.TYPES?.CONV_GROUP && JSONToObject(message?.payload?.data)?.businessID === "group_create")
   ) {
     return true;
   }
   return false;
 };
 
-export const handleSkeletonSize = (
-  width: number,
-  height: number,
-  maxWidth: number,
-  maxHeight: number
-): { width: number; height: number } => {
+export const handleSkeletonSize = (width: number, height: number, maxWidth: number, maxHeight: number): { width: number; height: number } => {
   const widthToHeight = width / height;
   const maxWidthToHeight = maxWidth / maxHeight;
   if (width <= maxWidth && height <= maxHeight) {
     return { width, height };
-  } else if (
-    (width <= maxWidth && height > maxHeight) ||
-    (width > maxWidth &&
-      height > maxHeight &&
-      widthToHeight <= maxWidthToHeight)
-  ) {
+  } else if ((width <= maxWidth && height > maxHeight) || (width > maxWidth && height > maxHeight && widthToHeight <= maxWidthToHeight)) {
     return { width: width * (maxHeight / height), height: maxHeight };
   } else {
     return { width: maxWidth, height: height * (maxWidth / width) };

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

@@ -77,7 +77,7 @@ const TUIPerson = defineComponent({
           roleType: "TEACHER",
         });
         data.friendList.push(...(res.data.rows || []));
-        是否加载完成;
+        // 是否加载完成;
         data.finshed = res.data.pages <= res.data.current ? true : false;
       } catch {
         //

src/TUIKit/api.ts

@@ -17,3 +17,39 @@ export const imUserFriendPage = (params?: object) => {
     data: params,
   });
 };
+
+/**
+ * 即时通讯 - 转让群组
+ */
+export const imGroupChangeGroupOwner = (params?: object) => {
+  return request.post("/edu-app/imGroup/changeGroupOwner", {
+    data: params,
+  });
+};
+
+/**
+ * 即时通讯 - 群公告列表
+ */
+export const imGroupNoticePage = (params?: object) => {
+  return request.post("/edu-app/imGroupNotice/page", {
+    data: params,
+  });
+};
+
+/**
+ * 即时通讯 - 新增公告
+ */
+export const imGroupNoticeSave = (params?: object) => {
+  return request.post("/edu-app/imGroupNotice/save", {
+    data: params,
+  });
+};
+
+/**
+ * 即时通讯 - 修改群公告
+ */
+export const imGroupNoticeUpdate = (params?: object) => {
+  return request.post("/edu-app/imGroupNotice/update", {
+    data: params,
+  });
+};