gami-web/app/components/im/ConversationDetail.vue

<script setup lang="ts">
import type { Conversation } from '@tencentcloud/lite-chat'
import type { UserInfoItemVO } from '~/types/api'
import CloseListIcon from '~/assets/icons/im/close-list.svg'
import ArrowSvg from '~/assets/icons/mine/arrow-temp.svg'

type Props = {
  conversation: Conversation | null
  name: string
  avatar: string
  bizUserInfo?: UserInfoItemVO
}

const props = withDefaults(defineProps<Props>(), {
  bizUserInfo: undefined,
})

const emit = defineEmits<{
  (e: 'back' | 'close'): void
}>()
</script>

<template>
  <div class="im-detail">
    <header class="im-detail__header">
      <div class="im-detail__header-left">
        <button
          class="im-detail__back"
          type="button"
          aria-label="back"
          @click="emit('back')"
        >
          <ArrowSvg class="im-detail__back-icon" />
        </button>

        <div class="im-detail__avatar">
          <img
            class="im-detail__avatar-img"
            :src="props.avatar"
            alt=""
            loading="lazy"
          >
        </div>

        <div class="im-detail__title">
          <p class="im-detail__name">
            {{ props.name || 'Conversation' }}
          </p>
          <p class="im-detail__status">
            online
          </p>
        </div>
      </div>

      <div class="im-detail__header-right">
        <!-- Icon can be empty (placeholder) -->
        <button
          class="im-detail__close"
          type="button"
          aria-label="close"
          @click="emit('close')"
        >
          <CloseListIcon />
        </button>
      </div>
    </header>

    <main class="im-detail__content">
      <div class="im-detail__placeholder">
        消息内容待接入
      </div>
    </main>

    <footer class="im-detail__composer">
      <div class="im-detail__input">
        <input
          class="im-detail__input-el"
          type="text"
          inputmode="text"
          autocomplete="off"
          placeholder="发送消息"
        >
      </div>
      <button
        class="im-detail__send"
        type="button"
        aria-label="send"
      />
    </footer>
  </div>
</template>

<style scoped lang="scss">
.im-detail {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F1F2F5;
}

.im-detail__header {
  background: #fff;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.im-detail__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.im-detail__back {
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.9;
  flex: 0 0 auto;
}

.im-detail__back-icon {
  @include size(24px);
  transform: rotate(180deg);
}

.im-detail__avatar {
  @include size(34px);
  border-radius: 999px;
  overflow: hidden;
  background: #eee;
  flex: 0 0 auto;
}

.im-detail__avatar-img {
  @include size(100%);
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

.im-detail__title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.im-detail__name {
  margin: 0;
  font-family: var(--font-title, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 17px;
  color: #1D2129;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-detail__status {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 14px;
  color: #86909C;
}

.im-detail__header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.im-detail__close {
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.im-detail__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.im-detail__placeholder {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  line-height: 14px;
  color: #86909C;
}

.im-detail__composer {
  background: #fff;
  padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 8px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.im-detail__input {
  flex: 1 1 auto;
  min-width: 0;
  background: #F2F3F5;
  border-radius: 999px;
  padding: 8px 10px;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.im-detail__input-el {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #1D2129;

  &::placeholder {
    color: #86909C;
  }
}

.im-detail__send {
  @include size(40px);
  border: none;
  background: #15E5E2;
  border-radius: 20px;
  flex: 0 0 auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
</style>