quyun-v2/frontend/portal/src/views/user/LikesView.vue

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import Toast from "primevue/toast";
import { useToast } from "primevue/usetoast";
import { userApi } from "../../api/user";
import { tenantPath } from "../../utils/tenant";

const toast = useToast();
const route = useRoute();
const tenantRoute = (path) => tenantPath(path, route);

const items = ref([]);
const loading = ref(true);

const fetchLikes = async () => {
  try {
    const res = await userApi.getLikes();
    items.value = res || [];
  } catch (e) {
    toast.add({
      severity: "error",
      summary: "加载失败",
      detail: e.message,
      life: 3000,
    });
  } finally {
    loading.value = false;
  }
};

onMounted(fetchLikes);

const removeItem = async (id) => {
  try {
    await userApi.removeLike(id);
    items.value = items.value.filter((i) => i.id !== id);
    toast.add({ severity: "success", summary: "已取消点赞", life: 2000 });
  } catch (e) {
    toast.add({
      severity: "error",
      summary: "操作失败",
      detail: e.message,
      life: 3000,
    });
  }
};

const getTypeIcon = (type) => {
  if (type === "video") return "pi-play-circle";
  if (type === "audio") return "pi-volume-up";
  return "pi-book";
};

const getTypeLabel = (type) => {
  if (type === "video") return "视频";
  if (type === "audio") return "音频";
  return "文章";
};
</script>

<template>
  <div
    class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8"
  >
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-2xl font-bold text-slate-900">我的点赞</h1>
    </div>

    <!-- Content Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div
        v-for="item in items"
        :key="item.id"
        class="group relative bg-white border border-slate-200 rounded-xl overflow-hidden hover:shadow-md transition-all hover:border-primary-200 cursor-pointer"
        @click="$router.push(tenantRoute(`/contents/${item.id}`))"
      >
        <!-- Cover -->
        <div class="aspect-video bg-slate-100 relative overflow-hidden">
          <img
            :src="item.cover"
            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
          />
          <div
            class="absolute bottom-2 left-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded flex items-center gap-1"
          >
            <i class="pi" :class="getTypeIcon(item.type)"></i>
            <span>{{ getTypeLabel(item.type) }}</span>
          </div>
        </div>

        <!-- Info -->
        <div class="p-4">
          <h3
            class="font-bold text-slate-900 mb-2 line-clamp-2 group-hover:text-primary-600 transition-colors"
          >
            {{ item.title }}
          </h3>
          <div class="flex items-center gap-2 text-xs text-slate-500 mb-3">
            <img
              :src="
                item.author_avatar ||
                `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.author_id}`
              "
              class="w-5 h-5 rounded-full"
            />
            <span>{{ item.author_name }}</span>
          </div>
          <div
            class="flex items-center justify-between text-xs text-slate-400 border-t border-slate-50 pt-3"
          >
            <span>{{ item.created_at }}</span>
            <button
              @click.stop="removeItem(item.id)"
              class="hover:text-primary-600 flex items-center gap-1 transition-colors"
            >
              <i class="pi pi-thumbs-up-fill text-primary-600"></i> 取消点赞
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Empty State -->
    <div v-if="!loading && items.length === 0" class="text-center py-20">
      <div
        class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-50 mb-4"
      >
        <i class="pi pi-thumbs-up text-2xl text-slate-300"></i>
      </div>
      <p class="text-slate-500 text-lg">暂无点赞内容</p>
      <router-link
        :to="tenantRoute('/')"
        class="mt-4 inline-block text-primary-600 font-medium hover:underline"
        >去发现好内容</router-link
      >
    </div>

    <Toast />
  </div>
</template>