1

admin

2026-01-06 089bf5d2378b3c4a61d795b2a92bede2c193b771

 src/components/chat/messaege/InviteMessage.vue

New file
@@ -0,0 +1,74 @@
<template>
  <div class="invite-message">
    <div v-if="invite.type == 1 || invite.type == 3" class="system-msg">
      <a @click="toUser(invite.operate_user.id)">
        {{ invite.operate_user.nickname }}
      </a>
      <span>{{ invite.type == 1 ? '邀请了' : '将' }}</span>
      <template v-for="(user, uidx) in invite.users">
        <a @click="toUser(user.id)">{{ user.nickname }}</a>
        <em v-show="uidx < invite.users.length - 1">、</em>
      </template>
      <span>{{ invite.type == 1 ? '加入了群聊' : '踢出了群聊' }}</span>
    </div>

    <div v-else-if="invite.type == 2" class="system-msg">
      <a @click="toUser(invite.operate_user.id)">
        {{ invite.operate_user.nickname }}
      </a>
      <span>退出了群聊</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'InviteMessage',
  props: {
    invite: {
      type: Object,
      required: true,
    },
  },
  methods: {
    toUser(user_id) {
      this.$emit('cat', user_id)
    },
  },
}
</script>
<style lang="less" scoped>
.invite-message {
  display: flex;
  justify-content: center;
}

.system-msg {
  margin: 10px auto;
  background-color: #f5f5f5;
  font-size: 11px;
  line-height: 30px;
  padding: 0 8px;
  word-break: break-all;
  word-wrap: break-word;
  color: #979191;
  user-select: none;
  font-weight: 300;
  display: inline-block;
  border-radius: 3px;

  span {
    margin: 0 5px;
  }

  a {
    color: #939596;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;

    &:hover {
      color: black;
    }
  }
}
</style>