Merge branch 'iteration-update' into online

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,31 @@
       </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";
+import { eventGlobal } from "./helpers";
 
 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 +77,10 @@ export default defineComponent({
       currentModel: "message",
       platform: sessionStorage.getItem("platform"), // 平台
       // env: TUIKit.TUIEnv
+      disconnectStatus: false, // 是否断开链接
+      disconnentContent: "聊天功能已断开，是否重新连接？",
+      disconnectBtnText: "连接",
+      dialogShow: false,
     });
 
     const onClose = () => {
@@ -81,6 +98,52 @@ export default defineComponent({
       data.currentModel = "message";
       data.currentConversationID = value;
     };
+
+    /** 账号被挤下线 */
+    const onKiicedOut = (e?: any) => {
+      data.dialogShow = true;
+      data.disconnectStatus = true;
+      store?.commit("setImConnent", false);
+    };
+
+    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;
+          store?.commit("setImConnent", true);
+        })
+        .catch(() => {
+          data.disconnentContent = "连接失败，请重试";
+          data.disconnectBtnText = "重新连接";
+          store?.commit("setImConnent", false);
+        });
+    };
+
+    onMounted(() => {
+      /** 账号被挤下线 */
+      TUIKit.tim.on(TUIKit.TIM.EVENT.KICKED_OUT, (e: any) => onKiicedOut(e));
+
+      eventGlobal.on("reConnectIm", (state: boolean) => {
+        if (state) {
+          data.dialogShow = true;
+          data.disconnectStatus = true;
+          store?.commit("setImConnent", false);
+        }
+      });
+    });
+
+    onUnmounted(() => {
+      TUIKit.tim.off(TUIKit.TIM.EVENT.KICKED_OUT, onKiicedOut);
+    });
+
     return {
       ...toRefs(data),
       // dragRef,
@@ -89,6 +152,7 @@ export default defineComponent({
       isMsgNeedReadReceipt,
       displayOnlineStatus,
       onClose,
+      handleManage,
     };
   },
 });

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

@@ -27,6 +27,8 @@ 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 { useStore } from "vuex";
+import { eventGlobal } from "@/helpers";
 
 const props = defineProps({
   placeholder: {
@@ -83,7 +85,7 @@ 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);
-
+const store = useStore && useStore();
 watch(
   () => conversation.value,
   (newVal: any, oldVal: any) => {
@@ -98,6 +100,12 @@ watch(
 );
 
 const sendMessage = async () => {
+  console.log(store.state.imConnent, "store.imConnent");
+  if (!store.state.imConnent) {
+    eventGlobal.emit("reConnectIm", true);
+    return;
+  }
+
   const TUIServer = (window as any)?.TUIKitTUICore?.TUIServer?.TUIChat;
   const messageList = editor?.value?.getEditorContent();
   const replyOrReferenceObject = replyOrReference.value;

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 };

src/storex/index.ts

@@ -42,6 +42,7 @@ const state: any = {
   taskList,
   userInfo: {},
   platform: "classroom", // 平台
+  imConnent: true, // IM是否连接
   token: "", //
   isMsgNeedReadReceipt: true,
   displayOnlineStatus: true,
@@ -131,6 +132,9 @@ export default createStore({
       state.platform = platform;
       sessionStorage.setItem("platform", platform);
     },
+    setImConnent(state: any, connent: boolean) {
+      state.imConnent = connent;
+    },
   },
   actions: {},
   modules: {},