<BarrageList :containerStyle="{ padding: '0px' }" />

<BarrageList :itemStyle="{ borderRadius: '10px', background: '#1C66e5', padding: '10px', boxSizing: 'border-box'}" />

// MyCustomMessage.vue
<template>
  <div class="custom-message">
    <div class="message-header">
      <span class="user-name">{{ getUserName(message) }}</span>
      <span class="message-time">{{ formatTime(message.time) }}</span>
    </div>
    <div class="message-content">
      {{ getMessageText(message) }}
    </div>
  </div>
</template>

<script setup lang="ts">
interface SimpleMessage {
  id: string;
  from: string;
  nick?: string;
  nameCard?: string;
  time: number;
  type: string;
  content: string;
  avatar?: string;
}

interface Props {
  message: SimpleMessage;
  isLastInChunk?: boolean;
}

const props = defineProps<Props>();

const formatTime = (timestamp: number) => {
  return new Date(timestamp * 1000).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  });
};

const getUserName = (message: SimpleMessage) => {
  return message.nameCard || message.nick || message.from || '匿名用户';
};

const getMessageText = (message: SimpleMessage) => {
  if (message.type === 'text') {
    return message.content || '';
  } else if (message.type === 'image') {
    return '[图片消息]';
  } else if (message.type === 'emoji') {
    return '[表情消息]';
  }
  return '[其他类型消息]';
};
</script>

<style scoped>.custom-message{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:12px;border-radius:12px;margin:4px 0;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform 0.2s ease}.custom-message:hover{transform:translateY(-2px)}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;opacity:0.9}.user-name{font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-time{font-size:11px;opacity:0.7}.message-content{font-size:14px;line-height:1.4;word-break:break-word}</style>

// 在 弹幕消息组件 中使用
<template>
   <BarrageList :Message="MyCustomMessage" />
</template>

<script setup lang="ts">
import MyCustomMessage from "./MyCustomMessage.vue";
</script>

<BarrageInput :containerStyle="{ backgroundColor: '#a8abb2', borderRadius: '0 0', boxShadow: '0 2px 8px rgba(0,0,0,0.1)'}" />

<template>
  <BarrageInput containerClass="my-custom-input-container" />
</template>

<style>.my-custom-input-container {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border: none;border-radius: 20px;padding: 8px 20px;}.my-custom-input-container:focus-within {box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);}</style>