feat: 服务支持页懒加载

- 骨架屏调整:服务支持页骨架屏布局调整
- 懒加载:服务支持页添加懒加载机制
This commit is contained in:
2025-12-19 11:17:32 +08:00
parent 8c720b7ac3
commit fa1a22b286
3 changed files with 65 additions and 37 deletions

View File

@ -1,34 +1,47 @@
<template>
<div class="page-container">
<div v-if="pending" class="flex justify-center items-center h-64">
<el-skeleton :rows="6" animated />
<support-tabs model-value="faq" />
<div class="page-header">
<h1 class="page-title">{{ $t('navigation.faq') }}</h1>
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div>
<div v-else>
<support-tabs model-value="faq" />
<div class="page-header">
<h1 class="page-title">{{ $t('navigation.faq') }}</h1>
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div>
<div class="page-content">
<question-filter
v-model="filters"
:product-type-options="productTypeOptions"
:product-options="productOptions"
:question-type-options="questionTypeOptions"
/>
<div v-if="pending" class="page-content">
<el-skeleton :rows="10" animated class="py-4" throttle="100">
<template #template>
<div class="flex flex-col gap-xl">
<el-skeleton-item
variant="rect"
style="width: 100%; height: 100px"
/>
<el-skeleton-item
v-for="i in 10"
:key="i"
variant="h1"
style="height: 60px"
/>
</div>
</template>
</el-skeleton>
</div>
<div v-else class="page-content">
<question-filter
v-model="filters"
:product-type-options="productTypeOptions"
:product-options="productOptions"
:question-type-options="questionTypeOptions"
/>
<question-list :questions="paginatedQuestions" />
<question-list :questions="paginatedQuestions" />
<el-pagination
v-model:current-page="page"
class="justify-center pagination-container"
layout="prev, pager, next"
hide-on-single-page
:page-size="questionsPerPage"
:total="filteredQuestions.length"
/>
</div>
<el-pagination
v-model:current-page="page"
class="justify-center pagination-container"
layout="prev, pager, next"
hide-on-single-page
:page-size="questionsPerPage"
:total="filteredQuestions.length"
/>
</div>
</div>
</template>
@ -57,7 +70,7 @@
{ label: $t('navigation.faq') },
];
const { data: questions, pending, error } = await useQuestionList();
const { data: questions, pending, error } = useQuestionList();
const questionTypeOptions = computed(() => {
const types: QuestionTypeView[] = [];