140 lines
3.9 KiB
Vue
140 lines
3.9 KiB
Vue
<script lang="ts" setup>
|
|
const loginState = useLoginState()
|
|
|
|
const { data: pptCategories } = useAsyncData('pptCategories', () =>
|
|
useFetchWrapped<
|
|
PagedDataRequest & AuthedRequest,
|
|
BaseResponse<PagedData<PPTCategory>>
|
|
>('App.Digital_PowerPointCat.GetList', {
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id,
|
|
page: 1,
|
|
perpage: 20,
|
|
})
|
|
)
|
|
|
|
const selectedCat = ref<number>(0)
|
|
const pagination = reactive({
|
|
page: 1,
|
|
perpage: 18,
|
|
})
|
|
|
|
const { data: pptTemplates } = useAsyncData(
|
|
'pptTemplates',
|
|
() =>
|
|
useFetchWrapped<
|
|
PagedDataRequest & { type: string | number } & AuthedRequest,
|
|
BaseResponse<PagedData<PPTTemplate>>
|
|
>('App.Digital_PowerPoint.GetList', {
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id,
|
|
page: pagination.page,
|
|
perpage: pagination.perpage,
|
|
type: selectedCat.value === 0 ? '' : selectedCat.value,
|
|
}),
|
|
{
|
|
watch: [selectedCat, pagination],
|
|
}
|
|
)
|
|
|
|
const onDownloadClick = (ppt: PPTTemplate) => {
|
|
const { download } = useDownload(ppt.file_url, `${ppt.title}.pptx`)
|
|
download()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="p-4 pb-0">
|
|
<BubbleTitle
|
|
title="PPT 模板库"
|
|
subtitle="Slide Templates"
|
|
/>
|
|
<GradientDivider />
|
|
</div>
|
|
<div class="p-4 pt-0">
|
|
<!-- cat selector -->
|
|
<div class="flex flex-wrap gap-2">
|
|
<div
|
|
v-if="pptTemplates?.data.items.length !== 0"
|
|
v-for="cat in [
|
|
{ id: 0, type: '全部' },
|
|
...(pptCategories?.data.items || []),
|
|
]"
|
|
@click="selectedCat = cat.id"
|
|
:key="cat.id"
|
|
:class="{
|
|
'bg-primary text-white': selectedCat === cat.id,
|
|
'bg-gray-100 text-gray-500': selectedCat !== cat.id,
|
|
}"
|
|
class="rounded-lg px-4 py-2 text-sm cursor-pointer"
|
|
>
|
|
{{ cat.type }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div
|
|
v-if="pptTemplates?.data.items.length === 0"
|
|
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
|
>
|
|
<Icon
|
|
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
|
name="i-tabler-photo-hexagon"
|
|
/>
|
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
|
暂时没有可用模板
|
|
</p>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 mt-4"
|
|
>
|
|
<div
|
|
v-for="ppt in pptTemplates?.data.items"
|
|
:key="ppt.id"
|
|
class="relative bg-white rounded-lg shadow-md overflow-hidden"
|
|
>
|
|
<NuxtImg
|
|
:src="ppt.preview_url"
|
|
:alt="ppt.title"
|
|
class="w-full aspect-video object-cover"
|
|
/>
|
|
<div
|
|
class="absolute inset-x-0 bottom-0 p-3 pt-6 flex justify-between items-end bg-gradient-to-t from-black/50 to-transparent"
|
|
>
|
|
<div class="space-y-0.5">
|
|
<h3 class="text-base font-bold text-white">{{ ppt.title }}</h3>
|
|
<p class="text-xs font-medium text-neutral-400">
|
|
{{ ppt.description }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<UButton
|
|
label="下载"
|
|
size="sm"
|
|
color="primary"
|
|
icon="tabler:download"
|
|
@click="onDownloadClick(ppt)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex justify-end">
|
|
<UPagination
|
|
v-if="pptTemplates?.data.total > pagination.perpage"
|
|
:total="pptTemplates?.data.total"
|
|
:page-count="pagination.perpage"
|
|
:max="9"
|
|
v-model="pagination.page"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|