fix: 补全骨架屏渲染机制
- 补全各个页面的骨架屏渲染机制修改
This commit is contained in:
@ -4,11 +4,17 @@
|
||||
<h1 class="page-title">{{ $t('navigation.downloads') }}</h1>
|
||||
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
|
||||
</div>
|
||||
<div v-if="!pending" class="page-content">
|
||||
<file-card :file-id="id" :file="file" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-skeleton :rows="6" animated />
|
||||
<div class="page-content">
|
||||
<el-skeleton
|
||||
:loading="pending"
|
||||
:rows="6"
|
||||
animated
|
||||
:throttle="{ leading: 500, trailing: 500 }"
|
||||
>
|
||||
<template #default>
|
||||
<file-card :file-id="id" :file="file" />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,31 +1,21 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="!pending">
|
||||
<div v-if="product">
|
||||
<!-- 面包屑导航 -->
|
||||
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
|
||||
<!-- 产品详情内容 -->
|
||||
<product-header :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 v-if="product">
|
||||
<!-- 面包屑导航 -->
|
||||
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
|
||||
<!-- 产品详情内容 -->
|
||||
<product-header :product="product" />
|
||||
<!-- 产品详细描述 -->
|
||||
<product-detail :product="product" />
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
<el-skeleton style="--el-skeleton-circle-size: 400px">
|
||||
<template #template>
|
||||
<el-skeleton-item variant="circle" />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
<el-skeleton :rows="5" animated />
|
||||
<!-- 未找到产品 -->
|
||||
<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>
|
||||
</template>
|
||||
@ -37,7 +27,7 @@
|
||||
// 获取路由参数
|
||||
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(() => [
|
||||
{ label: $t('navigation.home'), to: localePath('/') },
|
||||
|
||||
@ -1,18 +1,33 @@
|
||||
<template>
|
||||
<div class="search-page">
|
||||
<search-header v-model="keyword" />
|
||||
<div v-if="loading" class="search-state">
|
||||
<el-skeleton :rows="4" animated />
|
||||
</div>
|
||||
<search-tabs v-else-if="hasResults" :search-items="searchItems" />
|
||||
<div v-else class="search-state">
|
||||
<el-empty
|
||||
:description="
|
||||
route.query.query
|
||||
? $t('search.no-results', { query: route.query?.query })
|
||||
: $t('search.no-query')
|
||||
"
|
||||
/>
|
||||
<div class="search-state">
|
||||
<el-skeleton
|
||||
:loading="loading"
|
||||
animated
|
||||
:throttle="{ leading: 500, trailing: 500 }"
|
||||
>
|
||||
<template #template>
|
||||
<el-skeleton-item
|
||||
v-for="i in 10"
|
||||
: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>
|
||||
</template>
|
||||
@ -96,7 +111,11 @@
|
||||
.search-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.skeleton-item {
|
||||
height: 80px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
@ -1,23 +1,18 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="!pending">
|
||||
<div v-if="solution">
|
||||
<div class="page-header">
|
||||
<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 v-if="solution">
|
||||
<div class="page-header">
|
||||
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
|
||||
</div>
|
||||
<solution-detail :solution="solution" />
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
<el-skeleton :rows="5" animated />
|
||||
<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>
|
||||
</template>
|
||||
@ -29,7 +24,7 @@
|
||||
// 获取路由参数
|
||||
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(() => [
|
||||
{ label: $t('navigation.home'), to: localePath('/') },
|
||||
|
||||
Reference in New Issue
Block a user