template-10586/app/pages/articles.vue

<template>
  <main class="min-h-screen bg-gray-50 p-8">
    <div class="mx-auto max-w-5xl space-y-6">
      <a-card title="文章列表 (pageCmsArticle)" class="shadow-sm">
        <div class="flex flex-wrap items-center gap-3">
          <a-input-password
            v-model:value="token"
            placeholder="Authorization (AccessToken)"
            class="w-96"
          />
          <a-button :disabled="pending" @click="applyToken">设置Token</a-button>
          <a-button :disabled="pending" danger @click="clearToken">清除Token</a-button>
          <a-input
            v-model:value="keywords"
            placeholder="关键词 keywords"
            class="w-72"
            @press-enter="doSearch"
          />
          <a-button type="primary" :loading="pending" @click="doSearch">查询</a-button>
          <a-button :disabled="pending" @click="refresh">刷新</a-button>
          <div class="text-sm text-gray-500">
            TenantId: {{ tenantId }}
          </div>
        </div>

        <a-alert
          v-if="error"
          class="mt-4"
          show-icon
          type="error"
          :message="String(error)"
        />

        <a-table
          class="mt-4"
          :data-source="list"
          :loading="pending"
          :pagination="false"
          row-key="articleId"
          size="middle"
        >
          <a-table-column title="ID" data-index="articleId" width="90" />
          <a-table-column title="标题" data-index="title">
            <template #default="{ record }">
              <NuxtLink
                v-if="record?.articleId"
                class="text-blue-600 hover:underline"
                :to="`/item/${record.articleId}`"
              >
                {{ record.title }}
              </NuxtLink>
              <span v-else>{{ record.title }}</span>
            </template>
          </a-table-column>
          <a-table-column title="编号" data-index="code" width="220" />
          <a-table-column title="栏目" data-index="categoryName" width="160" />
          <a-table-column title="创建时间" data-index="createTime" width="180" />
          <a-table-column title="操作" key="action" width="120">
            <template #default="{ record }">
              <a-button
                size="small"
                type="link"
                :disabled="!record?.articleId"
                @click="record?.articleId && navigateTo(`/item/${record.articleId}`)"
              >
                查看
              </a-button>
            </template>
          </a-table-column>
        </a-table>

        <div class="mt-4 flex items-center justify-end">
          <a-pagination
            :current="page"
            :page-size="limit"
            :total="total"
            show-size-changer
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @show-size-change="onPageSizeChange"
          />
        </div>
      </a-card>
    </div>
  </main>
</template>

<script setup lang="ts">
import { pageCmsArticle } from '@/api/cms/cmsArticle/index'
import { getToken, removeToken, setToken } from '@/utils/token-util'

const route = useRoute()
const config = useRuntimeConfig()
const tenantId = computed(() => String(config.public.tenantId))

const page = ref(1)
const limit = ref(10)
const keywords = ref('')
const token = ref('')

onMounted(() => {
  token.value = getToken()
})

watch(
  () => route.query.keywords,
  (val) => {
    const next = Array.isArray(val) ? val[0] : val
    if (typeof next === 'string' && next.trim() && next.trim() !== keywords.value.trim()) {
      keywords.value = next.trim()
      page.value = 1
      refresh()
    }
  },
  { immediate: true }
)

const { data, pending, error, refresh } = useAsyncData(
  'cms-article-page',
  () =>
    pageCmsArticle({
      page: page.value,
      limit: limit.value,
      keywords: keywords.value || undefined
    }),
  { server: false }
)

const list = computed(() => data.value?.list ?? [])
const total = computed(() => data.value?.count ?? 0)

function applyToken() {
  setToken(token.value, true)
  refresh()
}

function clearToken() {
  removeToken()
  token.value = ''
  refresh()
}

function doSearch() {
  page.value = 1
  refresh()
}

function onPageChange(nextPage: number) {
  page.value = nextPage
  refresh()
}

function onPageSizeChange(_current: number, nextSize: number) {
  limit.value = nextSize
  page.value = 1
  refresh()
}
</script>