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 +272 -117
5 changed files with 272 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f1116491b6 - Show all commits

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>