fix: 补全骨架屏渲染机制

- 补全各个页面的骨架屏渲染机制修改
This commit is contained in:
2025-12-19 13:26:26 +08:00
parent f2533767d2
commit aa26731731
5 changed files with 77 additions and 61 deletions

View File

@ -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('/') },