From ce7cbc75df7553376920984f487faf56eb012fb9 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 18 Jul 2026 17:14:02 +0800
Subject: [PATCH] feat(diy-category): add skeleton loading state for category
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

优化分类页面加载体验，请求分类数据时显示骨架屏占位，避免页面先展示空态再切换内容造成的闪烁问题，同时调整了空状态的渲染逻辑，请求失败时也能正确显示空态占位
---
 components-diy/diy-category.vue | 98 +++++++++++++++++++++++++++++++--
 1 file changed, 92 insertions(+), 6 deletions(-)

diff --git a/components-diy/diy-category.vue b/components-diy/diy-category.vue
index 245efeb..b385335 100644
--- a/components-diy/diy-category.vue
+++ b/components-diy/diy-category.vue
@@ -77,7 +77,21 @@
 			</uni-popup>
 		</view>
 
-		<view class="content-box" v-if="categoryTree">
+		<!-- 全屏骨架占位 (只显示: 左分类树 + 右商品网格 + 底部空隙, 不画 navbar/TabBar,
+		     避免与小程序/H5 顶部 navbar / diy-bottom-nav 错位)。
+		     通过 v-if 拿到 categoryTreeLoading 时按真实布局骨架填充。
+		     search-box / 商品 nav-bar 由外层 category.vue 渲染, 不在本组件里动它 -->
+		<view class="category-page-skeleton" v-if="categoryTreeLoading">
+			<view class="skeleton-content">
+				<view class="skeleton-tree">
+					<view class="skeleton-tree-item" v-for="n in 8" :key="'sk-tree-' + n"></view>
+				</view>
+				<view class="skeleton-grid">
+					<view class="skeleton-card" v-for="n in 6" :key="'sk-card-' + n"></view>
+				</view>
+			</view>
+		</view>
+		<view class="content-box" v-else-if="categoryTree">
 			<block v-if="categoryTree.length">
 				<scroll-view scroll-y="true" class="tree-wrap">
 					<view class="category-item-wrap">
@@ -138,10 +152,6 @@
 				<view class="tips">{{ $lang('components-diy.diy-category.noCategory') }}</view>
 			</view>
 		</view>
-		<view class="category-empty" v-else>
-			<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix" show-menu-by-longpress></image>
-			<view class="tips">{{ $lang('components-diy.diy-category.noCategory') }}</view>
-		</view>
 
 		<!-- 	<view class="cart-box" v-if="(value.template == 2 || value.template == 4) && value.quickBuy && storeToken && categoryTree && categoryTree.length">
 			<view class="left-wrap">
@@ -209,7 +219,11 @@ export default {
 			isList: false,
 			lang: uni.getStorageSync("lang"),
 			lastSecondCategoryName: '',
-			template99Category: null
+			template99Category: null,
+			// 修复体验: 进入页面初期显示 "暂未分类" 然后又变成有数据的体验很差
+			// 用 categoryTreeLoading 区分"还在请求"和"真的没分类", 请求未完成时
+			// 显示骨架占位而非空态文案
+			categoryTreeLoading: true
 		};
 	},
 	created() {
@@ -359,6 +373,7 @@ export default {
 		 * 获取全部分类
 		 */
 		getCategoryTree() {
+			this.categoryTreeLoading = true;
 			this.$api.sendRequest({
 				url: '/api/goodscategory/tree',
 				data: {
@@ -388,6 +403,14 @@ export default {
 							this.loadGlobalSecondCategoryBtns();
 						}
 					}
+				},
+				fail: () => {
+					// 失败也保证 loading 关闭, 让骨架替换为"暂无分类"空态
+					this.categoryTree = this.categoryTree || [];
+				},
+				complete: () => {
+					// 无论成功失败都关闭 loading 骨架
+					this.categoryTreeLoading = false;
 				}
 			});
 		},
@@ -913,6 +936,69 @@ export default {
 	opacity: 0;
 }
 
+// 全屏骨架占位 — 不画 navbar/TabBar (由外层 category.vue 渲染), 避免错位
+.category-page-skeleton {
+	flex: 1;
+	height: 0; // 与 .content-box 一致, 让 flex 子项撑开父容器剩余高度
+	display: flex;
+	background-color: #f4f6fa;
+
+	.skeleton-content {
+		flex: 1;
+		display: flex;
+		min-height: 0;
+
+		.skeleton-tree {
+			width: 170rpx;
+			background-color: #f5f5f5;
+			padding: 20rpx 0;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			gap: 18rpx;
+			flex-shrink: 0;
+
+			.skeleton-tree-item {
+				height: 40rpx;
+				margin: 0 28rpx;
+				border-radius: 12rpx;
+				background: linear-gradient(90deg, #ececec 25%, #f5f5f5 37%, #ececec 63%);
+				background-size: 400% 100%;
+				animation: category-skeleton-shimmer 1.4s ease infinite;
+			}
+		}
+
+		.skeleton-grid {
+			flex: 1;
+			padding: 24rpx;
+			display: flex;
+			flex-wrap: wrap;
+			align-content: flex-start;
+			gap: 16rpx;
+			background-color: #f4f6fa;
+			min-width: 0;
+
+			.skeleton-card {
+				width: calc((100% - 32rpx) / 3);
+				height: 220rpx;
+				border-radius: 16rpx;
+				background: linear-gradient(90deg, #ececec 25%, #f5f5f5 37%, #ececec 63%);
+				background-size: 400% 100%;
+				animation: category-skeleton-shimmer 1.4s ease infinite;
+			}
+		}
+	}
+}
+
+@keyframes category-skeleton-shimmer {
+	0% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0 50%;
+	}
+}
+
 // 风格四
 .category-template-4 {
 	.search-box {