弹幕组件 (Web Vue3)

<template>
  <UIKitProvider theme="dark">
    <div class="app">
      <div class="chat-container">
        <div class="chat-content">
          <BarrageList class="barrage-list" />
        </div>
        <div class="chat-input">
          <BarrageInput class="barrage-input" />
        </div>
      </div>
    </div>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { BarrageList, BarrageInput, useLoginState, useLiveListState } from 'tuikit-atomicx-vue3';

const { login } = useLoginState();
const { joinLive } = useLiveListState();

async function initLogin() {
  try {
    await login({
      sdkAppId: 0,        // SDKAppID, 可以参考步骤 1 获取
      userId: '',         // UserID, 可以参考步骤 1 获取
      userSig: '',        // userSig, 可以参考步骤 1 获取
    });
  } catch (error) {
    console.error('登录失败:', error);
  }
}

onMounted(async () => {
  await initLogin();
  await joinLive({
    liveId: '输入对应直播间 LiveId',     // 输入对应 liveId 进入直播间
  });
});
</script>

<style scoped>.app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.chat-container{width:100%;max-width:500px;height:600px;border-radius:16px;display:flex;flex-direction:column;overflow:hidden}.chat-content{flex:1;overflow:hidden}.barrage-list{width:100%;height:100%}.chat-input{background-color:var(--bg-color-dialog);padding:16px}.barrage-input{width:100%}</style>

<BarrageList
  :containerStyle="{
    padding: '10px',
    overflow: 'hidden',
  }"
  :itemStyle="{
    background: 'rgba(99, 102, 241, 0.12)',
    borderRadius: '12px',
    padding: '8px 12px',
    border: '1px solid rgba(139, 92, 246, 0.2)',
    boxShadow: '0 1px 4px rgba(0, 0, 0, 0.15)',
    marginRight: '6px',
    boxSizing: 'border-box',
  }"
/>

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

<script setup lang="ts">
import type { Barrage } from 'tuikit-atomicx-vue3';

const props = defineProps<{
  message: Barrage;
}>();

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

const getSenderName = (message: Barrage) => {
  const sender = message.sender;
  return sender.nameCard || sender.userName || sender.userId || '匿名用户';
};

const getMessageText = (message: Barrage) => {
  if (message.textContent) {
    return message.textContent;
  }
  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>

<template>
  <BarrageList>
    <template #message-item="{ message, sender }">
      <!-- 礼物消息 -->
      <div v-if="isGiftMessage(message)" class="slot-gift-item">
        <img v-if="getGiftIcon(message)" class="slot-gift-img" :src="getGiftIcon(message)" :alt="getGiftName(message)" />
        <div class="slot-gift-info">
          <span class="slot-gift-sender">{{ sender.nameCard || sender.userName || sender.userId }}</span>
          <span class="slot-gift-detail">
            送出 <span class="slot-gift-name">{{ getGiftName(message) }}</span>
            <span class="slot-gift-count"> x{{ getGiftCount(message) }}</span>
          </span>
        </div>
      </div>
      <!-- 普通文本消息 -->
      <div v-else class="slot-text-item">
        <span v-if="sender.userId === currentLive?.liveOwner?.userId" class="slot-owner-badge">主播</span>
        <span class="slot-sender-name">{{ sender.nameCard || sender.userName || sender.userId }}:</span>
        <span class="slot-message-text">{{ message.textContent }}</span>
      </div>
    </template>
  </BarrageList>
</template>

<script setup lang="ts">
import { BarrageList, useLiveListState } from 'tuikit-atomicx-vue3';

const { currentLive } = useLiveListState();

function safelyParseJSON(str: string): any {
  try {
    return JSON.parse(str);
  } catch {
    return null;
  }
}

function isGiftMessage(message: { data?: string }): boolean {
  if (!message.data) return false;
  const data = safelyParseJSON(message.data);
  return data?.type === 'gift';
}

function getGiftData(message: { data?: string }) {
  if (!message.data) return null;
  const data = safelyParseJSON(message.data);
  return data?.type === 'gift' ? data : null;
}

function getGiftName(message: { data?: string }): string {
  return getGiftData(message)?.giftInfo?.name || '礼物';
}

function getGiftIcon(message: { data?: string }): string {
  return getGiftData(message)?.giftInfo?.iconUrl || '';
}

function getGiftCount(message: { data?: string }): number {
  return getGiftData(message)?.count || 1;
}
</script>

<style scoped>.slot-text-item{font-size:12px;line-height:1.6;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.05);word-break:break-word}.slot-owner-badge{display:inline-block;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-size:10px;font-weight:600;padding:1px 8px;border-radius:10px;margin-right:6px;vertical-align:middle;line-height:1.6}.slot-sender-name{color:rgba(167,139,250,0.85);font-weight:500;margin-right:4px}.slot-message-text{color:rgba(255,255,255,0.85)}.slot-gift-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(255,0,128,0.15),rgba(255,140,0,0.12) 50%,rgba(168,85,247,0.1));border:1px solid rgba(255,0,128,0.25);box-shadow:0 0 12px rgba(255,0,128,0.1),inset 0 0 12px rgba(255,140,0,0.05)}.slot-gift-img{width:40px;height:40px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 0 6px rgba(255,140,0,0.5))}.slot-gift-info{display:flex;flex-direction:column;gap:2px;min-width:0}.slot-gift-sender{font-size:12px;color:rgba(255,255,255,0.8);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slot-gift-detail{font-size:12px;color:rgba(255,255,255,0.5)}.slot-gift-name{color:#ffaa00;font-weight:700;text-shadow:0 0 8px rgba(255,170,0,0.4)}.slot-gift-count{color:#ff4081;font-weight:800;font-size:13px;margin-left:2px;text-shadow:0 0 8px rgba(255,64,129,0.4)}</style>

<template>
  <BarrageInput containerClass="cyberpunk-input" />
</template>

<style>.cyberpunk-input{background:linear-gradient(135deg,rgba(15,10,40,0.9),rgba(30,15,60,0.85))!important;border:1.5px solid transparent!important;border-radius:16px!important;padding:8px 18px!important;box-shadow:0 0 15px rgba(139,92,246,0.2),0 0 30px rgba(255,0,128,0.08),inset 0 1px 0 rgba(255,255,255,0.05)!important;transition:box-shadow .3s ease!important;border-image:linear-gradient(135deg,#ff0080,#7c3aed,#06b6d4) 1!important;border-image-slice:1!important}.cyberpunk-input:focus-within{box-shadow:0 0 24px rgba(139,92,246,0.35),0 0 48px rgba(255,0,128,0.12),inset 0 1px 0 rgba(255,255,255,0.08)!important}</style>