fix: 补全骨架屏渲染机制
- 补全各个页面的骨架屏渲染机制修改
This commit is contained in:
@ -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('/') },
|
||||
|
||||
Reference in New Issue
Block a user