添加提示

src/App.vue

@@ -23,6 +23,14 @@
               <TUIConversation v-show="currentModel === 'message'" @current="handleCurrentConversation" :displayOnlineStatus="displayOnlineStatus" />
               <TUIGroup v-if="platform != 'orchestra' && currentModel === 'group'" @current="handleCurrentConversation" :displayOnlineStatus="displayOnlineStatus" />
               <TUIPerson v-if="platform != 'orchestra' && currentModel === 'contact'" @current="handleCurrentConversation" :displayOnlineStatus="displayOnlineStatus" />
+
+              <div class="imDisconnent" v-if="disconnectStatus">
+                <p>
+                  <img src="./assets/icon-tips.png" class="iconTips" />
+                  {{ disconnentContent }}
+                </p>
+                <span class="btnConnent" @click="dialogShow = true">{{ disconnectBtnText }}</span>
+              </div>
             </div>
             <div class="chat">
               <TUIChat :isMsgNeedReadReceipt="isMsgNeedReadReceipt" :isNeedTyping="true" :isNeedEmojiReact="true">
@@ -34,26 +42,30 @@
       </div>
     </main>
     <i class="closeModal" @click="onClose"></i>
+
+    <DialogTUI :show="dialogShow" :isHeaderShow="true" title="提示" :is-footer-show="true" @submit="handleManage()" @update:show="(e) => (dialogShow = e)">
+      <p>聊天功能已断开，是否重新连接?</p>
+    </DialogTUI>
   </div>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  // getCurrentInstance,
-  reactive,
-  toRefs,
-} from "vue";
+import { computed, defineComponent, getCurrentInstance, onMounted, onUnmounted, reactive, toRefs } from "vue";
 // import { useI18nLocale } from '../../TUIKit/TUIPlugin/TUIi18n';
-import { TUICore } from "./TUIKit";
+import { genTestUserSig } from "./TUIKit";
 import { useStore } from "vuex";
+// import DialogTUI from "../../components/dialogTUi/index.vue";
+import DialogTUI from "./TUIKit/TUIComponents/components/dialogTUi/index.vue";
+import { SDKAppID, secretKey, userID } from "./main.ts";
 
 export default defineComponent({
+  components: {
+    DialogTUI,
+  },
   setup(props, context) {
-    // const instance = getCurrentInstance();
+    const instance = getCurrentInstance();
     // const locale = useI18nLocale();
-    // const TUIKit: any = instance?.appContext.config.globalProperties.$TUIKit;
+    const TUIKit: any = instance?.appContext.config.globalProperties.$TUIKit;
     const store = useStore && useStore();
     // const taskList = computed(() => store.state.taskList);
     // const dragRef = ref();
@@ -64,6 +76,10 @@ export default defineComponent({
       currentModel: "message",
       platform: sessionStorage.getItem("platform"), // 平台
       // env: TUIKit.TUIEnv
+      disconnectStatus: false, // 是否断开链接
+      disconnentContent: "聊天功能已断开，是否重新连接？",
+      disconnectBtnText: "连接",
+      dialogShow: false,
     });
 
     const onClose = () => {
@@ -81,6 +97,41 @@ export default defineComponent({
       data.currentModel = "message";
       data.currentConversationID = value;
     };
+
+    /** 账号被挤下线 */
+    const onKiicedOut = (e?: any) => {
+      data.dialogShow = true;
+      data.disconnectStatus = true;
+    };
+
+    const handleManage = () => {
+      console.log("manage", userID);
+      TUIKit.login({
+        userID: userID,
+        userSig: genTestUserSig({
+          SDKAppID,
+          secretKey,
+          userID,
+        }).userSig, // The password with which the user logs in to IM. It is the ciphertext generated by encrypting information such as userID.For the detailed generation method, see Generating UserSig
+      })
+        .then(() => {
+          data.disconnectStatus = false;
+        })
+        .catch(() => {
+          data.disconnentContent = "连接失败，请重试";
+          data.disconnectBtnText = "重新连接";
+        });
+    };
+
+    onMounted(() => {
+      /** 账号被挤下线 */
+      TUIKit.tim.on(TUIKit.TIM.EVENT.KICKED_OUT, (e: any) => onKiicedOut(e));
+    });
+
+    onUnmounted(() => {
+      TUIKit.tim.off(TUIKit.TIM.EVENT.KICKED_OUT, onKiicedOut);
+    });
+
     return {
       ...toRefs(data),
       // dragRef,
@@ -89,6 +140,7 @@ export default defineComponent({
       isMsgNeedReadReceipt,
       displayOnlineStatus,
       onClose,
+      handleManage,
     };
   },
 });

src/index.scss

@@ -1166,4 +1166,35 @@
   background-size: contain;
   z-index: 11;
   cursor: pointer;
+}
+
+.imDisconnent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 45px;
+  background: #FFEBEB;
+  padding: 0 20px;
+  // border-radius: 0px 0px 0px 20px;
+
+  p {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.6);
+
+  }
+
+  .iconTips {
+    width: 20px;
+    height: 21px;
+    margin-right: 4px;
+  }
+
+  .btnConnent {
+    font-size: 13px;
+    font-weight: 500;
+    color: #F9343F;
+    cursor: pointer;
+  }
 }

src/main.ts

@@ -65,3 +65,5 @@ TUIKit.login({
 });
 
 createApp(App).use(naive).use(store).use(TUIKit).mount("#app");
+
+export { SDKAppID, secretKey, userID };