nl-blogs/client/src/pages/admin/Posts.vue

<template>
  <div class="w-full animate-reveal">
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-2xl font-serif italic text-white">文章管理</h1>
      <router-link to="/admin/posts/create" class="admin-btn-primary flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
        新增文章
      </router-link>
    </div>
    
    <div class="admin-card overflow-hidden">
      <div class="overflow-x-auto">
        <table class="admin-table">
          <thead>
            <tr>
              <th class="w-20">ID</th>
              <th>标题</th>
              <th>分类</th>
              <th>专栏</th>
              <th>标签</th>
              <th>发布日期</th>
              <th>状态</th>
              <th class="text-right">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="post in posts" :key="post.id" class="group transition-colors duration-200">
              <td class="font-mono text-xs text-white/40">#{{ post.id }}</td>
              <td class="font-medium text-white group-hover:text-art-accent transition-colors">{{ post.title }}</td>
              <td><span class="px-2 py-1 rounded bg-white/5 border border-white/5 text-xs text-art-muted">{{ post.categoryName || post.category?.name || '未分类' }}</span></td>
              <td>
                <span v-if="post.columnName || post.column?.name" class="px-2 py-1 rounded bg-art-accent/10 border border-art-accent/20 text-xs text-art-accent">
                  {{ post.columnName || post.column?.name }}
                </span>
                <span v-else class="text-art-muted text-xs">-</span>
              </td>
              <td>
                <div v-if="post.tags && post.tags.length > 0" class="flex flex-wrap gap-1">
                  <span 
                    v-for="tag in post.tags.slice(0, 3)" 
                    :key="tag.id" 
                    class="px-2 py-0.5 rounded bg-white/5 border border-white/5 text-xs text-art-muted"
                  >
                    #{{ tag.name }}
                  </span>
                  <span v-if="post.tags.length > 3" class="text-art-muted text-xs">+{{ post.tags.length - 3 }}</span>
                </div>
                <span v-else class="text-art-muted text-xs">-</span>
              </td>
              <td class="text-art-muted text-xs">{{ post.date }}</td>
              <td>
                <button 
                  @click="handleToggleStatus(post)"
                  :class="['px-2 py-1 rounded-full text-xs font-medium border transition-all hover:opacity-80', post.isPublished === 1 ? 'bg-green-500/10 text-green-400 border-green-500/20' : 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20']"
                  title="点击切换状态"
                >
                  {{ post.isPublished === 1 ? '已发布' : '草稿' }}
                </button>
              </td>
              <td class="text-right">
                <div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                  <button @click="openRelationModal(post)" class="admin-btn-secondary py-1 px-3 text-xs">
                    管理
                  </button>
                  <router-link :to="`/admin/posts/${post.id}/edit`" class="admin-btn-secondary py-1 px-3 text-xs">
                    编辑
                  </router-link>
                  <button @click="deletePost(post.id)" class="admin-btn-danger py-1 px-3 text-xs">
                    删除
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div v-if="posts.length === 0" class="p-16 text-center">
        <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl">📝</div>
        <h3 class="text-white font-medium mb-2">暂无文章</h3>
        <p class="text-art-muted text-sm mb-6">开始您的创作之旅吧</p>
        <router-link to="/admin/posts/create" class="admin-btn-secondary inline-flex items-center gap-2">
          + 新增文章
        </router-link>
      </div>
    </div>

    <!-- Post Relation Modal -->
    <PostRelationModal
      v-model:isOpen="isRelationModalOpen"
      :post="editingPost"
      @saved="fetchPosts"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAdminPosts, deletePost as deletePostApi, Post, togglePostStatus } from '../../services/api'
import { useToast } from '../../composables/useToast'
import PostRelationModal from '../../components/admin/PostRelationModal.vue'

const router = useRouter()
const toast = useToast()
const posts = ref<Post[]>([])
const isRelationModalOpen = ref(false)
const editingPost = ref<Post | null>(null)

const openRelationModal = (post: Post) => {
  editingPost.value = post
  isRelationModalOpen.value = true
}

const fetchPosts = async () => {
  try {
    const response = await getAdminPosts()
    // Handle PaginationResponse structure
    if ('list' in response) {
      posts.value = response.list
    } else {
      // Fallback if API returns array directly (legacy)
      posts.value = response as any
    }
  } catch (error) {
    console.error('Error fetching posts:', error)
    toast.showToast('获取文章列表失败', 'error')
  }
}

const handleToggleStatus = async (post: Post) => {
  const newStatus = post.isPublished === 1 ? 0 : 1
  try {
    await togglePostStatus(post.id, newStatus)
    post.isPublished = newStatus
    toast.showToast(newStatus === 1 ? '文章已发布' : '文章已转为草稿', 'success')
  } catch (error) {
    console.error('Error toggling status:', error)
    toast.showToast('更新状态失败', 'error')
  }
}

const deletePost = async (id: number) => {
  if (confirm('确定要删除这篇文章吗？')) {
    try {
      await deletePostApi(id)
      toast.showToast('文章删除成功', 'success')
      fetchPosts()
    } catch (error) {
      console.error('Error deleting post:', error)
      toast.showToast('删除文章失败', 'error')
    }
  }
}

onMounted(() => {
  fetchPosts()
})
</script>

<style scoped>
/* Scoped styles removed, using Tailwind classes */
</style>