feat(core): 初始化项目基础架构和CMS功能模块
- 添加Docker相关配置文件(.dockerignore, .env.example, .gitignore) - 实现服务端API代理功能,支持文件、模块和服务器API转发 - 创建文章详情页、栏目文章列表页和单页内容展示页面 - 集成Ant Design Vue组件库并实现SSR样式提取功能 - 定义API响应数据结构类型和应用布局组件 - 开发开发者应用中心和文章管理页面 - 实现CMS导航菜单获取和多租户切换功能
This commit is contained in:
158
app/pages/articles.vue
Normal file
158
app/pages/articles.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user