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

feat: 页面懒加载 #98

Manually merged
remilia merged 7 commits from feat/lazy-load into master 2025-12-19 13:28:25 +08:00
Conversation 1 Commits 7 Files Changed 16 +407 -213
16 changed files with 407 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/pages/search/SearchTabs.vue
View File

@ -47,3 +47,9 @@
currentPage.value = 1; // 重置页码 currentPage.value = 1; // 重置页码
}); });
</script> </script>
<style scoped>
.el-tabs {
width: 100%;
}
</style>

63
app/pages/about/index.vue
View File

@ -1,36 +1,37 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div v-if="!pending"> <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
<div class="content"> <div class="content">
<!-- eslint-disable-next-line vue/no-v-html --> <el-skeleton :loading="pending" :rows="10" animated>
<div class="html-typography" v-html="companyProfile.content || ''" /> <template #default>
<!-- <div v-if="!hydrated" v-html="companyProfile.content || ''" /> --> <!-- eslint-disable-next-line vue/no-v-html -->
<!-- <div v-else> --> <div class="html-typography" v-html="companyProfile?.content || ''" />
<!-- <html-renderer --> <!-- <div v-if="!hydrated" v-html="companyProfile.content || ''" /> -->
<!-- class="html-typography" --> <!-- <div v-else> -->
<!-- :html="companyProfile.content || ''" --> <!-- <html-renderer -->
<!-- /> --> <!-- class="html-typography" -->
<!-- </div> --> <!-- :html="companyProfile.content || ''" -->
</div> <!-- /> -->
<!-- </div> -->
<el-divider content-position="left">{{ $t('learn-more') }}</el-divider> <el-divider content-position="left">{{
<div class="button-group"> $t('learn-more')
<learn-more-card }}</el-divider>
:title="$t('navigation.contact-info')" <div class="button-group">
:icon="ElIconService" <learn-more-card
:to="$localePath('/support/contact-us')" :title="$t('navigation.contact-info')"
/> :icon="ElIconService"
<learn-more-card :to="$localePath('/support/contact-us')"
:title="$t('navigation.address')" />
:icon="ElIconMapLocation" <learn-more-card
@click="openMap" :title="$t('navigation.address')"
/> :icon="ElIconMapLocation"
</div> @click="openMap"
</div> />
<div v-else class="loading"> </div>
<el-skeleton :rows="5" animated /> </template>
</el-skeleton>
</div> </div>
</div> </div>
</template> </template>
@ -42,7 +43,9 @@
{ label: $t('navigation.home'), to: localePath('/') }, { label: $t('navigation.home'), to: localePath('/') },
{ label: $t('navigation.about-us') }, { label: $t('navigation.about-us') },
]; ];
const { data: companyProfile, pending, error } = await useCompanyProfile(); const { data, pending, error } = useCompanyProfile();
const companyProfile = computed(() => data.value ?? null);
const openMap = () => { const openMap = () => {
window.open(localePath('/locate')); window.open(localePath('/locate'));

16
app/pages/download/[id].vue
View File

@ -4,11 +4,17 @@
<h1 class="page-title">{{ $t('navigation.downloads') }}</h1> <h1 class="page-title">{{ $t('navigation.downloads') }}</h1>
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" /> <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div> </div>
<div v-if="!pending" class="page-content"> <div class="page-content">
<file-card :file-id="id" :file="file" /> <el-skeleton
</div> :loading="pending"
<div v-else> :rows="6"
<el-skeleton :rows="6" animated /> animated
:throttle="{ leading: 500, trailing: 500 }"
>
<template #default>
<file-card :file-id="id" :file="file" />
</template>
</el-skeleton>
</div> </div>
</div> </div>
</template> </template>

18
app/pages/locate.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<div>redirecting...</div> <div class="page-container">
<h1>{{ $t('redirecting') }}</h1>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -10,3 +12,17 @@
window.location.href = platform; window.location.href = platform;
}); });
</script> </script>
<style scoped>
.page-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh;
}
h1 {
font-size: 1.5rem;
font-weight: bold;
}
</style>

42
app/pages/products/[slug].vue
View File

@ -1,31 +1,21 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div v-if="!pending"> <div v-if="product">
<div v-if="product"> <!-- 面包屑导航 -->
<!-- 面包屑导航 --> <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" /> <!-- 产品详情内容 -->
<!-- 产品详情内容 --> <product-header :product="product" />
<product-header :product="product" /> <!-- 产品详细描述 -->
<!-- 产品详细描述 --> <product-detail :product="product" />
<product-detail :product="product" />
</div>
<!-- 未找到产品 -->
<div v-else class="not-found">
<not-found-result
:title="$t('product-not-found')"
:sub-title="$t('product-not-found-desc')"
:back-text="$t('back-to-products')"
:on-back="() => $router.push($localePath('/products'))"
/>
</div>
</div> </div>
<div v-else class="loading"> <!-- 未找到产品 -->
<el-skeleton style="--el-skeleton-circle-size: 400px"> <div v-else class="not-found">
<template #template> <not-found-result
<el-skeleton-item variant="circle" /> :title="$t('product-not-found')"
</template> :sub-title="$t('product-not-found-desc')"
</el-skeleton> :back-text="$t('back-to-products')"
<el-skeleton :rows="5" animated /> :on-back="() => $router.push($localePath('/products'))"
/>
</div> </div>
</div> </div>
</template> </template>
@ -37,7 +27,7 @@
// 获取路由参数 // 获取路由参数
const id = route.params.slug as string; const id = route.params.slug as string;
const { data: product, pending, error } = await useProduct(id); const { data: product, error } = await useProduct(id);
const breadcrumbItems = computed(() => [ const breadcrumbItems = computed(() => [
{ label: $t('navigation.home'), to: localePath('/') }, { label: $t('navigation.home'), to: localePath('/') },

104
app/pages/products/index.vue
View File

@ -10,31 +10,49 @@
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" /> <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div> </div>
<div v-if="!pending" class="page-content"> <div>
<div class="products-container"> <el-skeleton
<el-collapse v-model="activeNames" class="product-collapse"> animated
<el-collapse-item :loading="pending"
v-for="[key, value] in Object.entries(groupedProducts)" :throttle="{ leading: 500, trailing: 500 }"
:key="key" >
:title="key || '未分类'" <template #template>
:name="key || 'no-category'" <div v-for="i in 3" :key="i" class="products-container">
> <el-skeleton-item variant="h1" class="skeleton-collapse" />
<div class="group-list"> <div class="skeleton-group-list">
<product-card <el-skeleton-item
v-for="product in value.data" v-for="j in 3"
:key="product.id" :key="j"
:slug="product.id.toString()" variant="rect"
:image-url="getImageUrl(product.cover.toString())" class="skeleton-card"
:name="product.name"
:description="product.summary || ''"
/> />
</div> </div>
</el-collapse-item> </div>
</el-collapse> </template>
</div> <template #default>
</div> <div class="products-container">
<div v-else> <el-collapse v-model="activeNames" class="product-collapse">
<el-skeleton :rows="6" animated /> <el-collapse-item
v-for="[key, value] in Object.entries(groupedProducts)"
:key="key"
:title="key || '未分类'"
:name="key || 'no-category'"
>
<div class="group-list">
<product-card
v-for="product in value.data"
:key="product.id"
:slug="product.id.toString()"
:image-url="getImageUrl(product.cover.toString())"
:name="product.name"
:description="product.summary || ''"
/>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
</el-skeleton>
</div> </div>
</div> </div>
</template> </template>
@ -151,6 +169,46 @@
justify-content: flex-start; justify-content: flex-start;
} }
.skeleton-collapse {
height: 50px;
width: 100%;
}
.skeleton-group-list {
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: flex-start;
margin-bottom: 2rem;
}
.skeleton-card {
width: 30%;
height: 250px;
margin-right: 1rem;
}
@media (max-width: 1200px) {
.skeleton-card {
width: 45%;
}
}
@media (max-width: 768px) {
.group-list {
justify-content: center;
align-items: center;
}
.skeleton-group-list {
justify-content: center;
align-items: center;
}
.skeleton-card {
width: 90%;
}
}
:deep(.el-collapse-item__header) { :deep(.el-collapse-item__header) {
padding: 30px auto; padding: 30px auto;
font-size: 1.5rem; font-size: 1.5rem;

45
app/pages/search.vue
View File

@ -1,18 +1,33 @@
<template> <template>
<div class="search-page"> <div class="search-page">
<search-header v-model="keyword" /> <search-header v-model="keyword" />
<div v-if="loading" class="search-state"> <div class="search-state">
<el-skeleton :rows="4" animated /> <el-skeleton
</div> :loading="loading"
<search-tabs v-else-if="hasResults" :search-items="searchItems" /> animated
<div v-else class="search-state"> :throttle="{ leading: 500, trailing: 500 }"
<el-empty >
:description=" <template #template>
route.query.query <el-skeleton-item
? $t('search.no-results', { query: route.query?.query }) v-for="i in 10"
: $t('search.no-query') :key="i"
" variant="rect"
/> class="skeleton-item"
/>
</template>
<template #default>
<search-tabs v-if="hasResults" :search-items="searchItems" />
<div v-else>
<el-empty
:description="
route.query.query
? $t('search.no-results', { query: route.query?.query })
: $t('search.no-query')
"
/>
</div>
</template>
</el-skeleton>
</div> </div>
</div> </div>
</template> </template>
@ -96,7 +111,11 @@
.search-state { .search-state {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 3rem 0; }
.skeleton-item {
height: 80px;
margin-bottom: 1rem;
} }
@media (max-width: 640px) { @media (max-width: 640px) {

29
app/pages/solutions/[slug].vue
View File

@ -1,23 +1,18 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div v-if="!pending"> <div v-if="solution">
<div v-if="solution"> <div class="page-header">
<div class="page-header"> <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div>
<solution-detail :solution="solution" />
</div>
<div v-else class="not-found">
<not-found-result
:title="$t('solution-not-found')"
:sub-title="$t('solution-not-found-desc')"
:back-text="$t('back-to-solutions')"
:on-back="() => $router.push($localePath('/solutions'))"
/>
</div> </div>
<solution-detail :solution="solution" />
</div> </div>
<div v-else class="loading"> <div v-else class="not-found">
<el-skeleton :rows="5" animated /> <not-found-result
:title="$t('solution-not-found')"
:sub-title="$t('solution-not-found-desc')"
:back-text="$t('back-to-solutions')"
:on-back="() => $router.push($localePath('/solutions'))"
/>
</div> </div>
</div> </div>
</template> </template>
@ -29,7 +24,7 @@
// 获取路由参数 // 获取路由参数
const id = route.params.slug as string; const id = route.params.slug as string;
const { data: solution, pending, error } = await useSolution(id); const { data: solution, error } = await useSolution(id);
const breadcrumbItems = computed(() => [ const breadcrumbItems = computed(() => [
{ label: $t('navigation.home'), to: localePath('/') }, { label: $t('navigation.home'), to: localePath('/') },

118
app/pages/solutions/index.vue
View File

@ -8,41 +8,59 @@
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" /> <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div> </div>
<div v-if="!pending" class="solutions-container"> <div class="solutions-container">
<el-tabs v-model="activeName" class="solutions-tabs"> <el-skeleton
<el-tab-pane :label="$t('all')" name="all"> :loading="pending"
<div class="solution-list"> animated
<solution-card :throttle="{
v-for="solution in solutions" leading: 500,
:key="solution.id" trailing: 500,
:title="solution.title" }"
:summary="solution.summary || ''" >
:cover-url="getImageUrl(solution.cover || '')" <template #template>
:document-id="solution.id.toString()" <div class="skeleton-group-list">
<el-skeleton-item
v-for="i in 12"
:key="i"
variant="rect"
class="skeleton-card"
/> />
</div> </div>
</el-tab-pane> </template>
<el-tab-pane <template #default>
v-for="[key, value] in Object.entries(groupedSolutions)" <el-tabs v-model="activeName" class="solutions-tabs">
:key="key" <el-tab-pane :label="$t('all')" name="all">
:label="key || '未分类'" <div class="solution-list">
:name="key || 'no-category'" <solution-card
> v-for="solution in solutions"
<div class="solution-list"> :key="solution.id"
<solution-card :title="solution.title"
v-for="solution in value.data" :summary="solution.summary || ''"
:key="solution.id" :cover-url="getImageUrl(solution.cover || '')"
:document-id="solution.id.toString()" :document-id="solution.id.toString()"
:cover-url="getImageUrl(solution.cover || '')" />
:title="solution.title" </div>
:summary="solution.summary || ''" </el-tab-pane>
/> <el-tab-pane
</div> v-for="[key, value] in Object.entries(groupedSolutions)"
</el-tab-pane> :key="key"
</el-tabs> :label="key || '未分类'"
</div> :name="key || 'no-category'"
<div v-else> >
<el-skeleton :rows="6" animated /> <div class="solution-list">
<solution-card
v-for="solution in value.data"
:key="solution.id"
:document-id="solution.id.toString()"
:cover-url="getImageUrl(solution.cover || '')"
:title="solution.title"
:summary="solution.summary || ''"
/>
</div>
</el-tab-pane>
</el-tabs>
</template>
</el-skeleton>
</div> </div>
</div> </div>
</template> </template>
@ -56,7 +74,9 @@
{ label: $t('navigation.solutions') }, { label: $t('navigation.solutions') },
]; ];
const { data: solutions, pending, error } = await useSolutionList(); const { data, pending, error } = useSolutionList();
const solutions = computed(() => data.value ?? []);
const activeName = ref<string>('all'); const activeName = ref<string>('all');
@ -123,4 +143,34 @@
margin-bottom: 2rem; margin-bottom: 2rem;
gap: 40px; gap: 40px;
} }
.skeleton-group-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
margin-bottom: 2rem;
}
.skeleton-card {
width: 30%;
height: 200px;
}
@media (max-width: 1200px) {
.skeleton-card {
width: 45%;
}
}
@media (max-width: 768px) {
.skeleton-group-list {
justify-content: center;
align-items: center;
}
.skeleton-card {
width: 90%;
}
}
</style> </style>

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

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

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

@ -1,9 +1,6 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div v-if="pending"> <div>
<el-skeleton :rows="5" animated />
</div>
<div v-else>
<support-tabs model-value="documents" /> <support-tabs model-value="documents" />
<div class="page-header"> <div class="page-header">
<h1 class="page-title">{{ $t('navigation.documents') }}</h1> <h1 class="page-title">{{ $t('navigation.documents') }}</h1>
@ -17,22 +14,47 @@
:document-type-options="documentTypeOptions" :document-type-options="documentTypeOptions"
/> />
<document-list <el-skeleton
:documents="paginatedDocuments" :loading="pending"
:show-category=" animated
filters.selectedDocumentType === null || :throttle="{
filters.selectedDocumentType === undefined leading: 500,
" trailing: 500,
/> }"
>
<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>
<template #default>
<document-list
:documents="paginatedDocuments"
:show-category="
filters.selectedDocumentType === null ||
filters.selectedDocumentType === undefined
"
/>
<el-pagination <el-pagination
v-model:current-page="page" v-model:current-page="page"
class="justify-center pagination-container" class="justify-center pagination-container"
layout="prev, pager, next" layout="prev, pager, next"
hide-on-single-page hide-on-single-page
:page-size="documentsPerPage" :page-size="documentsPerPage"
:total="filteredDocuments.length" :total="filteredDocuments.length"
/> />
</template>
</el-skeleton>
</div> </div>
</div> </div>
</div> </div>
@ -56,7 +78,9 @@
const page = ref(1); const page = ref(1);
const documentsPerPage = 10; const documentsPerPage = 10;
const { data: documents, pending, error } = await useDocumentList(); const { data, pending, error } = useDocumentList();
const documents = computed(() => data.value ?? []);
const documentTypeOptions = computed(() => { const documentTypeOptions = computed(() => {
const types: DocumentTypeView[] = []; const types: DocumentTypeView[] = [];

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

@ -1,34 +1,47 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div v-if="pending" class="flex justify-center items-center h-64"> <support-tabs model-value="faq" />
<el-skeleton :rows="6" animated /> <div class="page-header">
<h1 class="page-title">{{ $t('navigation.faq') }}</h1>
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div> </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"> <div class="page-content">
<question-filter <question-filter
v-model="filters" v-model="filters"
:product-type-options="productTypeOptions" :product-type-options="productTypeOptions"
:product-options="productOptions" :product-options="productOptions"
:question-type-options="questionTypeOptions" :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 <el-pagination
v-model:current-page="page" v-model:current-page="page"
class="justify-center pagination-container" class="justify-center pagination-container"
layout="prev, pager, next" layout="prev, pager, next"
hide-on-single-page hide-on-single-page
:page-size="questionsPerPage" :page-size="questionsPerPage"
:total="filteredQuestions.length" :total="filteredQuestions.length"
/> />
</div> </template>
</el-skeleton>
</div> </div>
</div> </div>
</template> </template>
@ -57,7 +70,9 @@
{ label: $t('navigation.faq') }, { label: $t('navigation.faq') },
]; ];
const { data: questions, pending, error } = await useQuestionList(); const { data, pending, error } = useQuestionList();
const questions = computed(() => data.value ?? []);
const questionTypeOptions = computed(() => { const questionTypeOptions = computed(() => {
const types: QuestionTypeView[] = []; const types: QuestionTypeView[] = [];

3
i18n/locales/en.json
View File

@ -127,5 +127,6 @@
"specs": "Specifications", "specs": "Specifications",
"faq": "FAQ", "faq": "FAQ",
"documents": "Documents" "documents": "Documents"
} },
"redirecting": "Redirecting..."
} }

3
i18n/locales/es.json
View File

@ -126,5 +126,6 @@
"specs": "Especificaciones", "specs": "Especificaciones",
"faq": "FAQ", "faq": "FAQ",
"documents": "Documentos" "documents": "Documentos"
} },
"redirecting": "Redirigiendo..."
} }

3
i18n/locales/ru.json
View File

@ -126,5 +126,6 @@
"specs": "Технические спецификации", "specs": "Технические спецификации",
"faq": "Часто задаваемые вопросы", "faq": "Часто задаваемые вопросы",
"documents": "Связанные документы" "documents": "Связанные документы"
} },
"redirecting": "Перенаправление..."
} }

3
i18n/locales/zh.json
View File

@ -126,5 +126,6 @@
"specs": "技术规格", "specs": "技术规格",
"faq": "常见问题", "faq": "常见问题",
"documents": "相关文档" "documents": "相关文档"
} },
"redirecting": "正在跳转..."
} }