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

<template>
  <message-component>
    <div ref="messageIcon" class="message-icon">
      <span v-show="unReadMessages?.newCount" class="un-read-num"></span>
      <svg-icon name="message"></svg-icon>
    </div>
    <el-popover
      placement="bottom-start"
      :width="useVW(400)"
      :show-arrow="false"
      :virtual-ref="messageIcon"
      trigger="click"
      virtual-triggering
    >
      <div class="message-popover-content">
        <div class="title">
          <span class="unread-count">{{ unReadMessages?.newCount || 0 }}</span>
          <span>条消息</span>
        </div>
        <div class="message-list">
          <div
            v-for="message in unReadMessages?.messages"
            :key="message.sendUserId"
            class="flex message-row"
            @click="onReceiveMessage"
          >
            <div class="message-send-user">
              <div class="user-name">{{ message.sendUserName }}</div>
              <div class="message-time">{{ dayjs(message.sendTime).format('HH:mm') }}</div>
            </div>
            <pre class="flex-1 message-content" v-html="message.content"></pre>
          </div>
        </div>
        <confirm-button
          size="small"
          between
          ok-text="收消息"
          cancel-text="发消息"
          @confirm="onReceiveMessage"
          @cancel="onSendMessage"
        ></confirm-button>
      </div>
    </el-popover>
    <message-window
      v-model="visibleMessageWindow"
      v-model:type="messageWindowType"
      v-model:replyUserId="replyUserId"
      :paper-path="props.paperPath"
    ></message-window>
  </message-component>
</template>

<script setup lang="ts" name="Message">
/** 头部消息组件 */
import { defineComponent, withDefaults, ref, useSlots, watch, inject } from 'vue'
import { ElPopover } from 'element-plus'
import dayjs from 'dayjs'
import useVW from '@/hooks/useVW'
import useVModel from '@/hooks/useVModel'
import useMessageLoop from '@/hooks/useMessageLoop'
import useMainStore from '@/store/main'
import MessageWindow from '@/components/shared/message/MessageWindow.vue'
import ConfirmButton from '@/components/common/ConfirmButton.vue'
import SvgIcon from '@/components/common/SvgIcon.vue'

const props = withDefaults(
  defineProps<{
    type?: 'view' | 'send'
    replyUserId?: number | null
    messageVisible?: boolean | null
    paperPath?: string | null
  }>(),
  { type: 'view', replyUserId: null, paperPath: null, messageVisible: false }
)

const MessageComponent = defineComponent({
  setup() {
    const mainStore = useMainStore()
    return {
      mainStore,
    }
  },
  render() {
    const slots = useSlots()
    return this.mainStore?.myUserInfo?.role === 'ADMIN' ? null : slots.default?.()
  },
})

const setMessageVisible = inject<(visible: boolean) => void>('setMessageVisible')
const setReplyUserId = inject<(replyUserId: number | null) => void>('setReplyUserId')

const messageIcon = ref<HTMLDivElement>()

const unReadMessages = useMessageLoop()

const messageWindowType = useVModel(props, 'type')

const replyUserId = useVModel(props, 'replyUserId')

/** 发送/查看消息Modal */
const visibleMessageWindow = ref<boolean>(false)

watch(
  () => props.messageVisible,
  () => {
    if (props.messageVisible) {
      visibleMessageWindow.value = true
      messageWindowType.value = 'send'
    }
  }
)

watch(visibleMessageWindow, () => {
  if (!visibleMessageWindow.value) {
    setMessageVisible?.(false)
  }
})

watch(replyUserId, () => {
  setReplyUserId?.(replyUserId.value)
})

/** 收消息 */
const onReceiveMessage = () => {
  messageWindowType.value = 'view'
  visibleMessageWindow.value = true
}

/** 发消息 */
const onSendMessage = () => {
  messageWindowType.value = 'send'
  visibleMessageWindow.value = true
}
</script>

<style scoped lang="scss">
.message-icon {
  display: grid;
  place-items: center;
  font-size: $LargeFont;
  position: relative;
  .un-read-num {
    position: absolute;
    width: 8px;
    height: 8px;
    right: -2px;
    top: -2px;
    border-radius: 50%;
    background-color: $DangerColor;
  }
}
.message-popover-content {
  color: $NormalColor;
  .title {
    .unread-count {
      font-size: $MediumFont;
      color: $DangerColor;
      margin-right: 4px;
    }
  }
  .message-list {
    border-bottom: $OnePixelLine;
    margin: 10px 0 40px;
    .message-row {
      padding: 10px 4px;
      height: 52px;
      font-weight: 400;
      border-top: $OnePixelLine;
      &:hover {
        background-color: #f5f5f5;
      }
      .message-send-user {
        width: 49px;
        margin-right: 0.5em;
        font-size: $SmallFont;
        .user-name {
          font-weight: 500;
          text-align: justify;
          text-align-last: justify;
        }
        .message-time {
          text-align: center;
          font-weight: 300;
        }
      }
      .message-content {
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: $SmallFont;
      }
    }
  }
}
</style>