修改问题

package-lock.json

@@ -23,6 +23,7 @@
         "@vuepic/vue-datepicker": "3.2.1",
         "@vueuse/core": "^8.9.4",
         "clean-deep": "^3.4.0",
+        "eventemitter3": "^5.0.1",
         "query-string": "^8.1.0",
         "sass": "^1.64.2",
         "sass-loader": "^10.1.1",
@@ -1285,6 +1286,11 @@
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+    },
     "node_modules/evtd": {
       "version": "0.2.4",
       "resolved": "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz",
@@ -3329,6 +3335,11 @@
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+    },
     "evtd": {
       "version": "0.2.4",
       "resolved": "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz",

package.json

@@ -25,6 +25,7 @@
     "@vuepic/vue-datepicker": "3.2.1",
     "@vueuse/core": "^8.9.4",
     "clean-deep": "^3.4.0",
+    "eventemitter3": "^5.0.1",
     "query-string": "^8.1.0",
     "sass": "^1.64.2",
     "sass-loader": "^10.1.1",

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

@@ -196,6 +196,7 @@ import { imGroupChangeGroupOwner, imGroupDetail, imGroupDismiss, imGroupMemberPa
 import Vuex from "vuex";
 import { handleErrorPrompts } from "../../utils";
 import useClipboard from "vue-clipboard3";
+import { eventGlobal } from "@/helpers";
 
 const manage = defineComponent({
   components: {
@@ -779,6 +780,7 @@ const manage = defineComponent({
           imGroupQuit({
             id: data.conversation.groupProfile.groupID,
           }).then(() => {
+            eventGlobal.emit("removeGroup", data.conversation.groupProfile.groupID);
             manage.TUIServer.deleteConversation(data.conversation.conversationID);
             manage.TUIServer.store.conversation = {};
             toggleShow();
@@ -790,12 +792,12 @@ const manage = defineComponent({
             id: data.conversation.groupProfile.groupID,
           })
             .then(() => {
+              eventGlobal.emit("removeGroup", data.conversation.groupProfile.groupID);
               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,

src/TUIKit/TUIComponents/container/TUIContact/components/style/color.scss

@@ -22,6 +22,7 @@
   &-cancel {
     border: 1Px solid #dddddd;
     color: #666666;
+    background-color: #f9f9f9;
   }
 
   &-default {

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

@@ -56,12 +56,13 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, onMounted, reactive, toRefs } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { caculateTimeago } from "../utils";
 import { handleAvatar, handleName, handleAt } from "../TUIChat/utils/utils";
 import { imGroupPage, imGroupDetail } from "../../../api";
 import { useThrottleFn } from "@vueuse/core";
 import DialogTUI from "../../components/dialogTUi/index.vue";
+import { eventGlobal } from "@/helpers";
 const TUIGroup = defineComponent({
   name: "TUIGroup",
   components: { DialogTUI },
@@ -150,8 +151,23 @@ const TUIGroup = defineComponent({
       data.loading = false;
     };
 
+    /** 删除移除的组和退出的群 */
+    const onRemoveGroup = (groupId: any) => {
+      const index = data.groupList.findIndex((group: any) => group.groupId == groupId);
+
+      data.groupList.splice(index, 1);
+    };
+
     onMounted(() => {
       getList();
+
+      eventGlobal.on("removeGroup", (groupId: any) => {
+        onRemoveGroup(groupId);
+      });
+    });
+
+    onUnmounted(() => {
+      eventGlobal.off("removeGroup", onRemoveGroup);
     });
 
     const noSearch = (val: string) => {

src/helpers/index.ts

@@ -0,0 +1,3 @@
+import EventEmitter from "eventemitter3";
+
+export const eventGlobal = new EventEmitter();