marking-cet-web/src/components/shared/message/MessageWindow.vue

<template>
  <base-dialog v-model="visible" unless :footer="false" class="message-dialog" destroy-on-close>
    <component
      :is="MessageWindowContent"
      :reply-user-id="replyUserId"
      @close="onClose"
      @change-type="onChangeType"
      @reply="onReply"
    ></component>
  </base-dialog>
</template>

<script setup lang="ts" name="MessageWindow">
/** 发送/回复消息 */
import { ref, computed, withDefaults } from 'vue'
import useVModel from '@/hooks/useVModel'
import BaseDialog from '@/components/element/BaseDialog.vue'
import MessageHistory from '@/components/shared/message/MessageList.vue'
import MessageSend from '@/components/shared/message/MessageSend.vue'

type ModalType = 'view' | 'send'

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    type: ModalType
  }>(),
  { type: 'view' }
)

const visible = useVModel(props, 'modelValue')

const modalType = useVModel(props, 'type')

const replyUserId = ref<number>()

const MessageWindowContent = computed(() => {
  return modalType.value === 'send' ? MessageSend : MessageHistory
})

const onClose = () => {
  visible.value = false
  replyUserId.value = void 0
}

const onChangeType = (type: ModalType) => {
  modalType.value = type
}

/** 回复 */
const onReply = (userId: number) => {
  replyUserId.value = userId
}
</script>

<style lang="scss">
.message-dialog {
  background-color: transparent;
  box-shadow: none;
  .el-dialog__body {
    padding: 0 !important;
  }
}
</style>