remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 调整服务支持页面渲染模式

Browse Source 
- 将条件渲染由div判断改为el-skeleton template
This commit is contained in:
R2m1liA
2025-12-19 11:38:33 +08:00
parent fa1a22b286
commit bcc08a53ea
3 changed files with 85 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/pages/support/contact-us.vue
View File

@ -6,19 +6,20 @@
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div>
<div v-if="pending" class="page-content">
<el-skeleton :rows="5" animated />
</div>
<div v-else class="page-content">
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="html-typography" v-html="contactInfo?.content || ''" />
<!-- <div v-if="!hydrated" v-html="contactInfo?.content || ''" /> -->
<!-- <div v-else> -->
<!-- <html-renderer -->
<!-- class="html-typography" -->
<!-- :html="contactInfo?.content || ''" -->
<!-- /> -->
<!-- </div> -->
<div class="page-content">
<el-skeleton :rows="10" :loading="pending" animated>
<template #default>
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="html-typography" v-html="contactInfo?.content || ''" />
<!-- <div v-if="!hydrated" v-html="contactInfo?.content || ''" /> -->
<!-- <div v-else> -->
<!-- <html-renderer -->
<!-- class="html-typography" -->
<!-- :html="contactInfo?.content || ''" -->
<!-- /> -->
<!-- </div> -->
</template>
</el-skeleton>
</div>
</div>
</template>
@ -31,7 +32,9 @@
{ label: $t('navigation.support'), to: localePath('/support') },
{ label: $t('navigation.contact-info') },
];
const { data: contactInfo, pending, error } = useContactInfo();
const { data, pending, error } = useContactInfo();
const contactInfo = computed(() => data.value ?? null);
watch(error, (value) => {
if (value) {

65
app/pages/support/documents.vue
View File

@ -6,8 +6,22 @@
<h1 class="page-title">{{ $t('navigation.documents') }}</h1>
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div>
<div v-if="pending" class="page-content">
<el-skeleton :rows="10" animated class="py-4" throttle="100">
<div class="page-content">
<document-filter
v-model="filters"
:product-type-options="productTypeOptions"
:product-options="productOptions"
:document-type-options="documentTypeOptions"
/>
<el-skeleton
:loading="pending"
animated
:throttle="{
leading: 500,
trailing: 500,
}"
>
<template #template>
<div class="flex flex-col gap-xl">
<el-skeleton-item
@ -22,33 +36,26 @@
/>
</div>
</template>
<template #default>
<document-list
:documents="paginatedDocuments"
:show-category="
filters.selectedDocumentType === null ||
filters.selectedDocumentType === undefined
"
/>
<el-pagination
v-model:current-page="page"
class="justify-center pagination-container"
layout="prev, pager, next"
hide-on-single-page
:page-size="documentsPerPage"
:total="filteredDocuments.length"
/>
</template>
</el-skeleton>
</div>
<div v-else class="page-content">
<document-filter
v-model="filters"
:product-type-options="productTypeOptions"
:product-options="productOptions"
:document-type-options="documentTypeOptions"
/>
<document-list
:documents="paginatedDocuments"
:show-category="
filters.selectedDocumentType === null ||
filters.selectedDocumentType === undefined
"
/>
<el-pagination
v-model:current-page="page"
class="justify-center pagination-container"
layout="prev, pager, next"
hide-on-single-page
:page-size="documentsPerPage"
:total="filteredDocuments.length"
/>
</div>
</div>
</div>
</template>
@ -71,7 +78,9 @@
const page = ref(1);
const documentsPerPage = 10;
const { data: documents, pending, error } = useDocumentList();
const { data, pending, error } = useDocumentList();
const documents = computed(() => data.value ?? []);
const documentTypeOptions = computed(() => {
const types: DocumentTypeView[] = [];

60
app/pages/support/faq.vue
View File

@ -6,25 +6,7 @@
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div>
<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">
<div class="page-content">
<question-filter
v-model="filters"
:product-type-options="productTypeOptions"
@ -32,16 +14,34 @@
:question-type-options="questionTypeOptions"
/>
<question-list :questions="paginatedQuestions" />
<el-skeleton
:loading="pending"
animated
:throttle="{ leading: 500, trailing: 500 }"
>
<template #template>
<div class="flex flex-col gap-xl">
<el-skeleton-item
v-for="i in 10"
:key="i"
variant="h1"
style="height: 80px"
/>
</div>
</template>
<template #default>
<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"
/>
<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"
/>
</template>
</el-skeleton>
</div>
</div>
</template>
@ -70,7 +70,9 @@
{ label: $t('navigation.faq') },
];
const { data: questions, pending, error } = useQuestionList();
const { data, pending, error } = useQuestionList();
const questions = computed(() => data.value ?? []);
const questionTypeOptions = computed(() => {
const types: QuestionTypeView[] = [];