style(components): 优化多端兼容性适配细节

1. 补充loading-cover组件的兼容场景说明
2. 为鸿蒙元服务适配flex gap替代方案

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%;

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;