AI-News/frontend/app/components/home/HomePlaza.vue

<template>
  <div class="home-plaza" id="home-plaza-section">
    <!-- Header -->
    <div class="plaza-header">
      <div class="plaza-header-left">
        <h2 class="plaza-title">首页广场</h2>
        <p class="plaza-subtitle">精选 AI 应用与最新玩法，每次来都有新发现</p>
      </div>
      <div class="plaza-header-right">
        <button
          class="plaza-btn primary"
          type="button"
          @click="handleProtectedAction"
        >
          我要上架
        </button>
        <button
          class="plaza-btn outline"
          type="button"
          @click="openBenefit"
        >
          领取福利
        </button>
      </div>
    </div>

    <!-- Magazine Grid -->
    <div class="plaza-grid">
      <!-- Left: Feature Card (Magazine Cover Style) -->
      <div
        class="plaza-feature"
        :data-transition-slug="featureArticle?.slug"
        :data-hero-title="featureArticle?.slug"
        :ref="(el) => registerCardRef(featureArticle?.slug || '', el)"
        @click="handleArticleClick(featureArticle)"
        :style="{
          backgroundImage: `url(${featureArticle?.cover || '/cover.jpg'})`
        }"
      >
        <div class="feature-overlay"></div>
        <div class="feature-content">
          <div class="feature-badge">本周主推</div>
          <h3 class="feature-title" :data-hero-title="featureArticle?.slug">
            {{ featureArticle?.title || "探索 AI 的无限可能" }}
          </h3>
          <p class="feature-desc">
            {{
              featureArticle?.description ||
              "深入了解最新的 AI 技术趋势和应用场景，发现更多精彩内容..."
            }}
          </p>
          
          <div class="feature-footer">
            <div class="feature-author">
              <img
                :src="featureArticle?.author?.image || '/avatar-placeholder.png'"
                alt="Author"
                class="author-avatar"
              />
              <div class="author-info">
                <span class="author-name">{{ featureArticle?.author?.username || "官方编辑" }}</span>
                <span class="publish-date">{{ formatDateFull(featureArticle?.createdAt) }}</span>
              </div>
            </div>
            
            <div class="feature-actions">
              <button 
                class="plaza-like-btn" 
                :class="{ active: featureArticle?.favorited }"
                @click.stop="toggleLike(featureArticle, $event)"
                :title="featureArticle?.favorited ? '取消喜欢' : '喜欢'"
              >
                <svg viewBox="0 0 24 24" aria-hidden="true">
                   <path d="M12 21s-6.7-4.5-9.4-7.2A6 6 0 1 1 12 6a6 6 0 1 1 9.4 7.8C18.7 16.5 12 21 12 21Z" />
                </svg>
                点赞 {{ formatCount(featureArticle?.favoritesCount || featureArticle?.likes) }}
              </button>
              <button class="feature-cta">立即体验</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Right: List (Clean Info Stream) -->
      <div class="plaza-list">
        <div
          v-for="(article, index) in listArticles"
          :key="article.slug"
          class="plaza-item-card"
          :data-transition-slug="article.slug"
          :data-hero-title="article.slug"
          :ref="(el) => registerCardRef(article.slug, el)"
          @click="handleArticleClick(article)"
          :style="{ '--delay': `${index * 0.1}s` }"
        >
          <!-- Visual Anchor Bar -->
          <div class="item-anchor-bar" :style="{ background: getAnchorColor(index) }"></div>
          
          <div class="item-content">
            <h4 class="item-title" :data-hero-title="article.slug">
              {{ article.title }}
            </h4>
            <p class="item-desc">{{ article.description }}</p>
            <div class="item-meta">
              <span class="meta-tag" v-if="article.tagList?.[0]">{{ article.tagList[0] }}</span>
              <span class="meta-divider">·</span>
              <span>{{ formatCount(article.views) }} 浏览</span>
              <span class="meta-divider">·</span>
              
              <!-- Like Button for List Item -->
              <button 
                 class="item-like-btn" 
                 :class="{ active: article.favorited }"
                 @click.stop="toggleLike(article, $event)"
                 :title="article.favorited ? '取消喜欢' : '喜欢'"
              >
                 <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M12 21s-6.7-4.5-9.4-7.2A6 6 0 1 1 12 6a6 6 0 1 1 9.4 7.8C18.7 16.5 12 21 12 21Z" />
                 </svg>
                 点赞 {{ formatCount(article.favoritesCount || article.likes) }}
              </button>
              
              <span class="meta-divider">·</span>
              <span>{{ formatDateFull(article.createdAt) }}</span>
            </div>
          </div>
          
          <div
            class="item-thumbnail"
            v-if="article.cover"
            :style="{ backgroundImage: `url(${article.cover})` }"
          ></div>
        </div>
      </div>
    </div>

    <!-- Login Modal -->
    <div v-if="showLoginModal" class="plaza-login-mask" @click.self="closeLoginModal">
      <div class="plaza-login-modal">
        <div class="plaza-login-title">请先登录后再操作</div>
        <div class="plaza-login-actions">
          <button
            type="button"
            class="modal-btn ghost"
            @click="closeLoginModal"
          >
            取消
          </button>
          <button type="button" class="modal-btn primary" @click="goLogin">
            前往登录
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  watch,
  type ComponentPublicInstance,
} from "vue";
import { navigateTo } from "#app";
import { useApi } from "@/composables/useApi";
import { useArticleNavContext } from "@/composables/useArticleNavContext";
import { useSharedTransition } from "@/composables/useSharedTransition";

interface Article {
  slug: string;
  title: string;
  description?: string | null;
  cover?: string | null;
  tagList?: string[];
  createdAt?: string;
  views?: number;
  likes?: number;
  favoritesCount?: number;
  favorites_count?: number;
  favorited?: boolean;
  author?: {
    username?: string;
    image?: string | null;
  };
}

const props = defineProps<{
  articles: Article[];
  isLoggedIn?: boolean;
}>();

const emit = defineEmits<{
  (e: 'like-changed', payload: { slug: string; favorited: boolean; favoritesCount: number }): void
}>();

const localArticles = ref<Article[]>([]);

watch(
  () => props.articles,
  (val) => {
    const arr = Array.isArray(val) ? val : [];
    localArticles.value = arr.map((article) => ({
      ...article,
      tagList: Array.isArray(article.tagList) ? article.tagList : [],
    }));
  },
  { immediate: true, deep: true },
);

const featureArticle = computed(() => localArticles.value[0]);
const listArticles = computed(() => localArticles.value.slice(1, 6)); // 右侧列表最多 5 条，不补齐，避免重复展示同一篇

const formatCount = (n?: number | null) =>
  Number.isFinite(n as number) ? Number(n).toLocaleString("zh-CN") : "0";
  
const formatDateFull = (dateStr?: string) => {
  if (!dateStr) return "";
  const d = new Date(dateStr);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
};

const getAnchorColor = (index: number) => {
  const colors = [
    '#ec4899', // Pink
    '#8b5cf6', // Purple
    '#3b82f6', // Blue
    '#06b6d4', // Cyan
    '#10b981'  // Emerald
  ];
  return colors[index % colors.length];
};

const showLoginModal = ref(false);
const navCtx = useArticleNavContext();
const transition = useSharedTransition();
const cardRefs = ref<Partial<Record<string, HTMLElement>>>({});
const api = useApi();

const isAuthed = computed(() => Boolean(props.isLoggedIn));

function toHTMLElement(
  el: Element | ComponentPublicInstance | null
): HTMLElement | null {
  if (!el) return null;
  if (el instanceof HTMLElement) return el;
  const maybeEl = (el as any)?.$el;
  return maybeEl instanceof HTMLElement ? maybeEl : null;
}

function registerCardRef(
  slug: string,
  el: Element | ComponentPublicInstance | null
) {
  if (!slug) return;
  const htmlEl = toHTMLElement(el);
  if (htmlEl) {
    cardRefs.value[slug] = htmlEl;
    markCardPosition(slug, htmlEl);
  } else {
    delete cardRefs.value[slug];
  }
}

function markCardPosition(slug: string, el?: HTMLElement) {
  const targetEl = el || cardRefs.value[slug];
  if (!slug || !targetEl) return;
  transition.markSource(slug, targetEl);
}

function refreshCardPositions() {
  Object.entries(cardRefs.value).forEach(([slug, el]) => {
    if (el) markCardPosition(slug, el);
  });
  transition.cleanupOldPositions();
}

onMounted(() => {
  nextTick(refreshCardPositions);
  window.addEventListener("resize", refreshCardPositions);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", refreshCardPositions);
  refreshCardPositions();
});

watch(
  () => props.articles,
  () => nextTick(refreshCardPositions),
  { deep: true }
);

function handleProtectedAction() {
  if (!isAuthed.value) {
    showLoginModal.value = true;
    return;
  }
  navigateTo("/articles/new");
}

function closeLoginModal() {
  showLoginModal.value = false;
}

function goLogin() {
  showLoginModal.value = false;
  navigateTo("/login");
}

function openBenefit() {
  window.open('https://api.wgetai.com/', '_blank');
}

function handleArticleClick(article?: Article) {
  if (!article?.slug) return;
  navCtx.setCurrent(article.slug);
  markCardPosition(article.slug);
  navigateTo(`/articles/${article.slug}`);
}

async function toggleLike(article: Article, event?: Event) {
  if (event) event.stopPropagation();
  if (!article?.slug) return;
  
  if (!isAuthed.value) {
    showLoginModal.value = true;
    return;
  }
  
  const isFavorited = Boolean(article.favorited);
  article.favorited = !isFavorited;
  
  // Update count (handle both likes and favoritesCount for compatibility)
  const count = article.favoritesCount || article.likes || 0;
  const newCount = count + (isFavorited ? -1 : 1);
  const applyState = (favorited: boolean, c: number) => {
    localArticles.value.forEach((item) => {
      if (item.slug === article.slug) {
        item.favorited = favorited;
        item.favoritesCount = c;
        item.likes = c;
      }
    });
    emit('like-changed', { slug: article.slug, favorited, favoritesCount: c });
  };
  applyState(!isFavorited, newCount);

  try {
    const method = isFavorited ? 'DELETE' : 'POST';
    if (method === 'POST') {
      await api.post(`/articles/${article.slug}/favorite`);
    } else {
      await api.del(`/articles/${article.slug}/favorite`);
    }
  } catch (e) {
    // Revert
    applyState(isFavorited, count);
    console.error('[HomePlaza] toggle like failed', e);
  }
}
</script>

<style scoped>
.home-plaza {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
  background: #fff; /* Changed to pure white */
  border-radius: var(--card-radius-lg);
  box-shadow: 0 4px 24px rgba(0,0,0,0.02);
  position: relative;
  z-index: 2;
}

/* Header */
.plaza-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 32px;
}

.plaza-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 0 0 6px 0;
  letter-spacing: -0.5px;
}

.plaza-subtitle {
  font-size: 14px;
  color: var(--color-text-sub);
  margin: 0;
}

.plaza-header-right {
  display: flex;
  gap: 12px;
}

.plaza-btn {
  padding: 8px 20px;
  border-radius: var(--btn-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.plaza-btn.primary {
  background: var(--grad-primary-btn);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-btn);
}

.plaza-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.plaza-btn.outline {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: var(--color-text-main);
}

.plaza-btn.outline:hover {
  border-color: var(--color-primary-end);
  color: var(--color-primary-end);
  background: #f8fafc;
}

/* Grid Layout */
.plaza-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
}

/* Feature Card */
.plaza-feature {
  position: relative;
  height: 480px;
  border-radius: var(--card-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  color: #fff;
  background-repeat: no-repeat;
  background-size: 180%;
  background-position: center center;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease-spring),
    background-size 0.5s ease;
  will-change: transform, background-size;
}

.plaza-feature:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-card-hover);
  background-size: 190%;
}

.plaza-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.18) 50%,
    rgba(0, 0, 0, 0.02)
  );
  opacity: 1;
  mix-blend-mode: normal;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.plaza-feature:hover::after {
  opacity: 0.9;
}

.feature-overlay {
  /* Additional gradient for text readability if needed */
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.42), transparent 62%);
  z-index: 2;
  pointer-events: none;
}

.feature-content {
  position: relative;
  z-index: 3;
}

.feature-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feature-title {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 16px 0;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.feature-desc {
  font-size: 16px;
  opacity: 0.95;
  margin: 0 0 32px 0;
  max-width: 90%;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feature-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feature-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 14px;
  font-weight: 600;
}

.publish-date {
  font-size: 12px;
  opacity: 0.8;
}

.feature-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-cta {
  padding: 12px 28px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 99px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.feature-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Like Button in Feature Card */
.plaza-like-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  padding: 8px 16px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
  font-weight: 600;
  font-size: 14px;
}

.plaza-like-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.05);
}

.plaza-like-btn.active {
  background: #fff;
  color: #e11d48;
  border-color: #fff;
}

.plaza-like-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.plaza-like-btn:hover svg {
  transform: scale(1.1);
}

/* List Section */
.plaza-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plaza-item-card {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: var(--color-bg-list-card);
  border-radius: var(--card-radius-md);
  transition: all var(--duration-hover) ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  animation: fade-in-up 0.5s ease backwards;
  animation-delay: var(--delay, 0s);
}

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

.plaza-item-card:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: var(--shadow-card-hover);
}

.item-anchor-bar {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  opacity: 0.6;
  transition: all 0.2s ease;
}

.plaza-item-card:hover .item-anchor-bar {
  opacity: 1;
  width: 6px;
}

.item-content {
  flex: 1;
  padding-left: 16px;
  min-width: 0;
}

.item-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
  margin: 0 0 6px 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-desc {
  font-size: 13px;
  color: var(--color-text-sub);
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #94a3b8;
  gap: 6px;
}

.meta-tag {
  color: var(--color-primary-end);
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.meta-divider {
  opacity: 0.5;
}

/* Like Button in List Item */
.item-like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}

.item-like-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.item-like-btn:hover {
  color: #64748b;
}

.item-like-btn:hover svg {
  transform: scale(1.1);
}

.item-like-btn.active {
  color: #e11d48;
}

.item-thumbnail {
  width: 80px;
  height: 60px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  margin-left: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plaza-item-card:hover .item-thumbnail {
  transform: scale(1.08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

/* Mobile */
@media (max-width: 1024px) {
  .plaza-grid {
    grid-template-columns: 1fr;
  }
  .plaza-feature {
    height: 400px;
  }
}

@media (max-width: 640px) {
  .home-plaza {
    padding: 20px;
  }
  .plaza-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .plaza-header-right {
    width: 100%;
    display: flex;
    gap: 12px;
  }
  .plaza-btn {
    flex: 1;
    text-align: center;
  }
  .plaza-feature {
    height: 360px;
    padding: 24px;
  }
  .feature-title {
    font-size: 28px;
  }
  .feature-desc {
    font-size: 14px;
    -webkit-line-clamp: 3;
  }
}

/* Login Modal */
.plaza-login-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plaza-login-modal {
  background: #fff;
  padding: 32px;
  border-radius: 24px;
  width: 90%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.plaza-login-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #1e293b;
}

.plaza-login-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.modal-btn {
  padding: 10px 24px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.modal-btn.primary {
  background: var(--color-primary-end);
  color: #fff;
}

.modal-btn.ghost {
  background: #f1f5f9;
  color: #64748b;
}
</style>