新增IM聊天

jeecgboot-vue3/src/views/system/im/ImChatModal.vue

@@ -0,0 +1,62 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    title="IM聊天"
+    :width="980"
+    :footer="null"
+    :canFullscreen="true"
+    :destroyOnClose="false"
+    wrapClassName="im-chat-modal-wrap"
+    @register="registerModal"
+    @open-change="handleOpenChange"
+  >
+    <div class="im-chat-modal-body">
+      <ImChat ref="imChatRef" embedded />
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import ImChat from './ImChat.vue';
+
+  defineOptions({ name: 'ImChatModal' });
+
+  const imChatRef = ref<InstanceType<typeof ImChat>>();
+
+  function restoreChatSession() {
+    nextTick(() => {
+      imChatRef.value?.restoreSessionIfNeeded?.();
+    });
+  }
+
+  const [registerModal] = useModalInner(() => {
+    restoreChatSession();
+  });
+
+  function handleOpenChange(open: boolean) {
+    if (open) {
+      restoreChatSession();
+    }
+  }
+</script>
+
+<style lang="less">
+  .im-chat-modal-wrap {
+    .im-chat-modal-body {
+      height: 70vh;
+      min-height: 480px;
+    }
+
+    .im-chat-page--embedded {
+      height: 100% !important;
+      padding: 0 !important;
+      background: transparent !important;
+    }
+
+    .im-chat-row {
+      border-radius: 4px;
+    }
+  }
+</style>