From d65f27b256d23f112065ffb0bb56a760995da2ac Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 18 Jul 2026 17:19:58 +0800
Subject: [PATCH] =?UTF-8?q?style(components):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=A4=9A=E7=AB=AF=E5=85=BC=E5=AE=B9=E6=80=A7=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 补充loading-cover组件的兼容场景说明
2. 为鸿蒙元服务适配flex gap替代方案
---
 components-diy/diy-category.vue            | 17 ++++++++++++++++-
 components/loading-cover/loading-cover.vue |  6 ++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/components-diy/diy-category.vue b/components-diy/diy-category.vue
index b385335..a92d3dc 100644
--- a/components-diy/diy-category.vue
+++ b/components-diy/diy-category.vue
@@ -937,6 +937,7 @@ export default {
 }
 
 // 全屏骨架占位 — 不画 navbar/TabBar (由外层 category.vue 渲染), 避免错位
+// 兼容鸿蒙元服务 (JSVM 对 gap 支持不一): 用 margin 兜底替代 gap
 .category-page-skeleton {
 	flex: 1;
 	height: 0; // 与 .content-box 一致, 让 flex 子项撑开父容器剩余高度
@@ -955,12 +956,21 @@ export default {
 			box-sizing: border-box;
 			display: flex;
 			flex-direction: column;
+			// #ifndef MP-HARMONY
 			gap: 18rpx;
+			// #endif
 			flex-shrink: 0;
 
 			.skeleton-tree-item {
 				height: 40rpx;
+				// #ifnedf MP-HARMONY
 				margin: 0 28rpx;
+				// #endif
+
+				// #ifdef MP-HARMONY
+				margin: 9rpx 28rpx; // 18rpx 间距 上下各 9rpx, 替代 gap:18rpx
+				// #endif
+
 				border-radius: 12rpx;
 				background: linear-gradient(90deg, #ececec 25%, #f5f5f5 37%, #ececec 63%);
 				background-size: 400% 100%;
@@ -974,13 +984,18 @@ export default {
 			display: flex;
 			flex-wrap: wrap;
 			align-content: flex-start;
+			// #ifndef MP-HARMONY
 			gap: 16rpx;
+			// #endif
 			background-color: #f4f6fa;
 			min-width: 0;
 
 			.skeleton-card {
-				width: calc((100% - 32rpx) / 3);
+				width: calc((100% - 32rpx) / 3); 
 				height: 220rpx;
+				// #ifdef MP-HARMONY
+				margin: 8rpx;
+				// #endif
 				border-radius: 16rpx;
 				background: linear-gradient(90deg, #ececec 25%, #f5f5f5 37%, #ececec 63%);
 				background-size: 400% 100%;
diff --git a/components/loading-cover/loading-cover.vue b/components/loading-cover/loading-cover.vue
index 9804158..7c012a4 100644
--- a/components/loading-cover/loading-cover.vue
+++ b/components/loading-cover/loading-cover.vue
@@ -61,8 +61,10 @@ export default {
 	z-index: 997;
 	background: #f8f8f8;
 	// 修复: 强制合成层, 让 spin 动画只在自身合成层跑, 不触发兄弟节点 (尤其是底部 TabBar) 重绘
-	// 微信小程序 / 鸿蒙元服务下 z-index:997 < diy-bottom-nav 的 z-index:2147483647, 不会盖住 tabBar,
-	// 但 loading 动画每一帧仍会触发 mp 重绘, 关联到相邻 fixed 元素即可观察到 TabBar 频闪。
+	// 兼容环境: 微信小程序 / 鸿蒙元服务 / H5 都受益
+	// - 微信小程序: spin 动画每帧导致兄弟 fixed 元素 TabBar 重绘
+	// - 鸿蒙元服务 JSVM: 同上, JSVM 重绘更明显
+	// - H5: will-change 提示浏览器持续合成
 	transform: translateZ(0);
 	-webkit-transform: translateZ(0);
 	will-change: transform;