nuxt-app/app/pages/articles/index.vue

<script setup lang="ts">
definePageMeta({ layout: 'default' });

const articles = ref<any[]>([]);
const loading = ref(true);

async function fetchArticles() {
  loading.value = true;
  const res = await $fetch<any>('/api/articles');
  if (res.code === 0) articles.value = res.data;
  loading.value = false;
}

async function createArticle() {
  const res = await $fetch<any>('/api/articles', { method: 'POST', body: { title: '无标题文章' } });
  if (res.code === 0) {
    await navigateTo(`/articles/${res.data.id}`);
  }
}

async function deleteArticle(id: number) {
  if (!confirm('确定删除这篇文章？')) return;
  await $fetch(`/api/articles/${id}`, { method: 'DELETE' });
  articles.value = articles.value.filter(a => a.id !== id);
}

function formatDate(ts: number) {
  return new Date(ts).toLocaleDateString('zh-CN', { year: 'numeric', month: 'short', day: 'numeric' });
}

onMounted(fetchArticles);
</script>

<template>
  <div class="articles-page">
    <div class="page-header">
      <div>
        <h1 class="page-title">我的文章</h1>
        <p class="page-sub">{{ articles.length }} 篇文章</p>
      </div>
      <button class="btn-new" @click="createArticle">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <path d="M12 5v14M5 12h14" />
        </svg>
        新建文章
      </button>
    </div>

    <div v-if="loading" class="empty-state">
      <div class="empty-state-icon">⏳</div>
      <div>加载中...</div>
    </div>

    <div v-else-if="articles.length === 0" class="empty-state">
      <div class="empty-state-icon">📝</div>
      <div>还没有文章，点击上方按钮开始创作</div>
    </div>

    <div v-else class="article-list">
      <div
        v-for="article in articles"
        :key="article.id"
        class="article-card"
        @click="navigateTo(`/articles/${article.id}`)"
      >
        <div class="article-main">
          <div class="article-title">{{ article.title }}</div>
          <div class="article-meta">
            <span class="status-tag" :class="article.status">{{ article.status === 'published' ? '已发布' : '草稿' }}</span>
            <span>{{ article.wordCount || 0 }} 字</span>
            <span>{{ formatDate(article.updatedAt) }}</span>
          </div>
        </div>
        <div class="article-actions" @click.stop>
          <button class="action-btn" @click="deleteArticle(article.id)" title="删除">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.articles-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.page-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  margin: 0;
}
.page-sub {
  font-size: 13px;
  color: var(--text3);
  margin: 4px 0 0;
}
.btn-new {
  background: var(--accent);
  color: #1a1208;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
.btn-new:hover { background: #d4b88a; }
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 12px;
  color: var(--text3);
}
.empty-state-icon { font-size: 40px; opacity: 0.5; }
.article-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s;
}
.article-card:hover { border-color: var(--border2); }
.article-main { min-width: 0; }
.article-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text3);
}
.status-tag {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.status-tag.draft { background: rgba(255,255,255,0.06); color: var(--text3); }
.status-tag.published { background: rgba(93,184,114,0.12); color: var(--success); }
.article-actions { flex-shrink: 0; }
.action-btn {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s;
}
.action-btn:hover { color: var(--error); }
</style>