thebet365/apps/player/src/components/HomeAnnouncementCard.vue

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { formatLocalMatchDateTime } from '@thebet365/shared';
import { usePlayerHome } from '../composables/usePlayerHome';
import { stripHtml } from '../utils/html';

const AUTOPLAY_MS = 4000;

const router = useRouter();
const { t, locale } = useI18n();
const { announcementItems } = usePlayerHome();

const currentPage = ref(1);
const paused = ref(false);
const itemsPerPage = 3;

let autoplayTimer = 0;

const totalPages = computed(() => Math.max(1, Math.ceil(announcementItems.value.length / itemsPerPage)));

const paginatedItems = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  return announcementItems.value.slice(start, start + itemsPerPage);
});

function openDetail(id: string) {
  router.push(`/announcements/${id}`);
}

function formatDate(createdAt?: string) {
  if (!createdAt) return '';
  return formatLocalMatchDateTime(createdAt, locale.value, { variant: 'compact' });
}

function itemTitle(item: (typeof announcementItems.value)[number]) {
  const title = item.translation?.title?.trim();
  if (title) return title;
  return stripHtml(item.translation?.body ?? '') || t('home.announcement_badge');
}

function prevPage() {
  currentPage.value = currentPage.value <= 1 ? totalPages.value : currentPage.value - 1;
}

function nextPage() {
  currentPage.value = currentPage.value >= totalPages.value ? 1 : currentPage.value + 1;
}

function startAutoplay() {
  window.clearInterval(autoplayTimer);
  if (totalPages.value <= 1) return;
  autoplayTimer = window.setInterval(() => {
    if (paused.value) return;
    nextPage();
  }, AUTOPLAY_MS);
}

function stopAutoplay() {
  window.clearInterval(autoplayTimer);
  autoplayTimer = 0;
}

onMounted(startAutoplay);
onUnmounted(stopAutoplay);

watch(totalPages, () => {
  if (currentPage.value > totalPages.value) {
    currentPage.value = 1;
  }
  startAutoplay();
});
</script>

<template>
  <div
    v-if="announcementItems.length > 0"
    class="home-announce-card"
    @mouseenter="paused = true"
    @mouseleave="paused = false"
  >
    <div class="card-header">
      <div class="header-title">
        <svg class="announce-icon" viewBox="0 0 24 24" aria-hidden="true">
          <path fill="currentColor" d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
        </svg>
        <span>{{ t('announcements.title') || '系统公告' }}</span>
      </div>
      <div v-if="totalPages > 1" class="pagination">
        <button type="button" class="page-btn" aria-label="Previous" @click="prevPage">‹</button>
        <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
        <button type="button" class="page-btn" aria-label="Next" @click="nextPage">›</button>
      </div>
    </div>

    <div class="card-body">
      <Transition name="announce-carousel" mode="out-in">
        <div :key="currentPage" class="carousel-slide">
          <button
            v-for="item in paginatedItems"
            :key="item.id"
            type="button"
            class="announce-row"
            @click="openDetail(item.id)"
          >
            <span class="row-main">
              <span class="title">{{ itemTitle(item) }}</span>
              <span v-if="item.createdAt" class="date">{{ formatDate(item.createdAt) }}</span>
            </span>
            <span class="chevron" aria-hidden="true">›</span>
          </button>
        </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped>
.home-announce-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(201, 162, 39, 0.05);
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-light);
}

.announce-icon {
  width: 18px;
  height: 18px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #1a1a1a;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.page-info {
  font-size: 12px;
  color: var(--text-muted);
}

.card-body {
  overflow: hidden;
  min-height: 138px; /* 3 rows × ~46px each, keeps layout stable during pagination */
}

.carousel-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.announce-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s;
}

.announce-row:last-child {
  border-bottom: none;
}

.announce-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.title {
  flex: 1;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.chevron {
  color: var(--gold);
  font-size: 18px;
  font-family: monospace;
}

.announce-carousel-enter-active,
.announce-carousel-leave-active {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.announce-carousel-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.announce-carousel-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>