nuxt-app/app/components/chat/ChatBubble.vue

<script setup lang="ts">
import type { ChatMessage } from "~~/server/service/chat"

const props = defineProps<{
  message: ChatMessage
  isMine: boolean
}>()

const time = computed(() => {
  const d = new Date(props.message.createdAt)
  const now = new Date()
  const isToday = d.toDateString() === now.toDateString()
  const timeStr = d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  if (isToday) return timeStr
  return `${d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })} ${timeStr}`
})

function renderContent(content: string): string {
  return content.replace(
    /@(\S+)/g,
    '<span class="mention-tag">@$1</span>'
  )
}
</script>

<template>
  <div class="chat-bubble" :class="{ 'is-mine': isMine }">
    <div class="bubble-avatar" :class="{ 'mine-avatar': isMine, 'author-avatar': message.isAuthor }">
      <span>{{ message.isAuthor ? '作' : message.nickname[0] }}</span>
    </div>
    <div class="bubble-body">
      <div class="bubble-meta">
        <span class="bubble-nickname" :class="{ 'mine-name': isMine, 'author-name': message.isAuthor }">
          {{ message.nickname }}
          <span v-if="message.isAuthor" class="author-badge">作者</span>
          <span v-else-if="message.mentionNotified" class="notified-badge">已通知</span>
          <span v-else-if="message.mentionSkipped" class="skipped-badge">作者在线</span>
        </span>
        <span class="bubble-time">{{ time }}</span>
      </div>
      <div class="bubble-content" :class="{ 'mine-content': isMine }" v-html="renderContent(message.content)" />
    </div>
  </div>
</template>

<style scoped>
.chat-bubble {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  align-items: flex-start;
  animation: slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-bubble.is-mine {
  flex-direction: row-reverse;
}

.chat-bubble.is-mine .bubble-body {
  align-items: flex-end;
}

/* ── Avatar ── */
.bubble-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-surface-card, #efe9de);
  color: var(--color-body-strong, #252523);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  border: 1px solid var(--color-hairline, #e6dfd8);
}

.mine-avatar {
  background: var(--color-primary, #cc785c);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(204, 120, 92, 0.25);
}

/* Author avatar — distinctive warm coral glow */
.author-avatar {
  background: linear-gradient(135deg, #cc785c 0%, #a9583e 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(204, 120, 92, 0.35), 0 0 0 2px rgba(204, 120, 92, 0.12);
}

/* ── Body ── */
.bubble-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 70%;
}

.bubble-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px;
}

.bubble-nickname {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-body-strong, #252523);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mine-name {
  color: var(--color-primary-active, #a9583e);
}

/* Author name — warm coral accent */
.author-name {
  color: var(--color-primary, #cc785c);
}

/* Badges */
.author-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary, #cc785c);
  padding: 1px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.notified-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-accent-teal, #5db8a6);
  background: rgba(93, 184, 166, 0.1);
  padding: 1px 6px;
  border-radius: 3px;
}

.skipped-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-accent-amber, #e8a55a);
  background: rgba(232, 165, 90, 0.1);
  padding: 1px 6px;
  border-radius: 3px;
}

.bubble-time {
  font-size: 10.5px;
  color: var(--color-muted-soft, #8e8b82);
  font-weight: 400;
}

/* ── Content bubble ── */
.bubble-content {
  background: #ffffff;
  border: 1px solid var(--color-hairline, #e6dfd8);
  border-radius: 6px 14px 14px 14px;
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-body, #3d3d3a);
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.mine-content {
  border-radius: 16px 6px 16px 16px;
  background: #fbf8f3;
  border-color: var(--color-hairline-soft, #ebe6df);
}

/* ── @mention ── */
.bubble-content :deep(.mention-tag) {
  color: var(--color-primary, #cc785c);
  font-weight: 700;
  background: rgba(204, 120, 92, 0.08);
  border-radius: 3px;
  padding: 0 3px;
}
</style>