新版官网模板

app/pages/articles.vue

@@ -0,0 +1,121 @@
+<template>
+  <main class="min-h-screen bg-gray-50 p-8">
+    <div class="mx-auto max-w-5xl space-y-6">
+      <a-card class="shadow-sm" title="文章列表 (pageAppArticle)">
+        <div class="flex flex-wrap items-center gap-3">
+          <a-input-password
+            v-model:value="token"
+            class="w-96"
+            placeholder="Authorization (AccessToken)"
+          />
+          <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"
+            class="w-72"
+            placeholder="关键词 keywords"
+            @pressEnter="doSearch"
+          />
+          <a-button :loading="pending" type="primary" @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"
+          :message="String(error)"
+          class="mt-4"
+          show-icon
+          type="error"
+        />
+
+        <a-table
+          :data-source="list"
+          :loading="pending"
+          :pagination="false"
+          class="mt-4"
+          row-key="articleId"
+          size="middle"
+        >
+          <a-table-column data-index="articleId" title="ID" width="90" />
+          <a-table-column data-index="title" title="标题" />
+          <a-table-column data-index="code" title="编号" width="220" />
+          <a-table-column data-index="categoryName" title="栏目" width="160" />
+          <a-table-column data-index="createTime" title="创建时间" width="180" />
+        </a-table>
+
+        <div class="mt-4 flex items-center justify-end">
+          <a-pagination
+            :current="page"
+            :page-size="limit"
+            :page-size-options="['10', '20', '50', '100']"
+            :total="total"
+            show-size-changer
+            @change="onPageChange"
+            @showSizeChange="onPageSizeChange"
+          />
+        </div>
+      </a-card>
+    </div>
+  </main>
+</template>
+
+<script lang="ts" setup>
+import { pageAppArticle as pageCmsArticle } from '@/api/app/article'
+import { getToken, removeToken, setToken } from '@/utils/token-util'
+
+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()
+})
+
+const { data, pending, error, refresh } = useAsyncData(
+  'app-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>