From 829444231c28c5fd3ce19643a84d9a7b658ed6f2 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Thu, 4 Jun 2026 14:33:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components-diy/diy-group):=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E7=BB=84=E4=BB=B6=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 替换原有的深拷贝方式为显式使用$util.deepClone
2. 拆分数据初始化和监听逻辑，新增processedData存储处理后的数据
3. 重构topNavColor计算属性，简化逻辑代码
4. 抽离组件数据处理为独立的processData方法
5. 优化diyDataArray计算属性的过滤和处理流程
---
 components-diy/diy-group.vue | 127 ++++++++++++++++++-----------------
 1 file changed, 67 insertions(+), 60 deletions(-)

diff --git a/components-diy/diy-group.vue b/components-diy/diy-group.vue
index 2dfcce5..c303cb5 100644
--- a/components-diy/diy-group.vue
+++ b/components-diy/diy-group.vue
@@ -291,81 +291,88 @@ export default {
 	mixins: [DiyMinx],
 	data() {
 		return {
-			diyGlobalData: null
+			diyGlobalData: this.diyData ? this.$util.deepClone(this.diyData) : null,
+			processedData: null
 		};
 	},
-	created() {
-		try {
-			this.diyGlobalData = JSON.parse(JSON.stringify(this.diyData));
-		} catch (e) {
-			console.error(e);
+	watch: {
+		diyData: {
+			handler() {
+				this.diyGlobalData = this.diyData ? this.$util.deepClone(this.diyData) : null;
+				this.processData();
+			},
+			deep: true
 		}
 	},
+	created() {
+		this.processData();
+	},
 	computed: {
 		topNavColor() {
-			var color = '';
-			if (this.diyData.global.topNavBg) {
-				color = 'transparent';
-				if (this.scrollTop > 20) {
-					color = this.diyData.global.topNavColor;
-				} else {
-					color = 'transparent';
-				}
-			} else {
-				color = this.diyData.global.topNavColor;
+			if (!this.diyData?.global) return '';
+
+			const { topNavBg, topNavColor } = this.diyData.global;
+			
+			if (topNavBg) {
+				return this.scrollTop > 20 ? topNavColor : 'transparent';
 			}
-			return color;
-		},
-		// 修改属性样式
-		setPagestyle() {
-			this.diyGlobalData.value.forEach((item, index) => {
-				item.pageStyle = '';
-				// 给每个组件增加位置属性，用于定位，搜索、分类导航等定位
-				// 如果是Tab组件内部的子组件，添加tabIndex前缀避免moduleIndex冲突
-				if (this.diyData.tabIndex !== undefined) {
-					item.moduleIndex = `${this.diyData.tabIndex}-${index + 1}`;
-				} else {
-					item.moduleIndex = index + 1;
-				}
-
-				// 特殊处理搜索框 当显示位置为滚动至顶部固定时，只设置背景颜色
-				if (item.componentName == 'Search' && item.positionWay == 'fixed') {
-					// item.pageStyle = 'background-color:' + item.pageBgColor + ';';
-					return false;
-				}
-
-				item.pageStyle += 'background-color:' + item.pageBgColor + ';';
-				if (item.margin) {
-					item.pageStyle += 'padding-top:' + item.margin.top * 2 + 'rpx' + ';';
-					item.pageStyle += 'padding-bottom:' + item.margin.bottom * 2 + 'rpx' + ';';
-					item.pageStyle += 'padding-right:' + item.margin.both * 2 + 'rpx' + ';';
-					item.pageStyle += 'padding-left:' + item.margin.both * 2 + 'rpx' + ';';
-				}
-			});
-
-			return this.diyGlobalData.value;
+			
+			return topNavColor;
 		},
 		// 过滤组件的渲染
 		diyDataArray() {
-			let data = [],
-				showModuleData = this.$store.state.diyGroupShowModule ? JSON.parse(this.$store.state
-					.diyGroupShowModule) : '';
+			if (!this.processedData) {
+				this.processData();
+			}
+			
+			const showModuleData = this.$store.state.diyGroupShowModule 
+				? JSON.parse(this.$store.state.diyGroupShowModule) 
+				: null;
 
-			if (showModuleData.length) {
-				if (showModuleData.includes('null')) return [];
+			if (!showModuleData || !showModuleData.length) {
+				return this.processedData || [];
+			}
 
-				let diyDataArr = this.setPagestyle;
-				diyDataArr.forEach((item, index) => {
-					if (showModuleData.includes(item.componentName)) {
-						data.push(item);
-					}
-				});
-			} else data = this.setPagestyle;
+			if (showModuleData.includes('null')) {
+				return [];
+			}
 
-			return data;
+			return (this.processedData || []).filter(item => 
+				showModuleData.includes(item.componentName)
+			);
 		}
 	},
-	methods: {}
+	methods: {
+		processData() {
+			if (!this.diyGlobalData || !this.diyGlobalData.value) {
+				this.processedData = [];
+				return;
+			}
+			
+			this.processedData = this.diyGlobalData.value.map((item, index) => {
+				const newItem = this.$util.deepClone(item);
+				
+				newItem.pageStyle = '';
+				
+				newItem.moduleIndex = this.diyData.tabIndex !== undefined
+					? `${this.diyData.tabIndex}-${index + 1}`
+					: index + 1;
+
+				if (newItem.componentName !== 'Search' || newItem.positionWay !== 'fixed') {
+					newItem.pageStyle = `background-color:${newItem.pageBgColor};`;
+					
+					if (newItem.margin) {
+						newItem.pageStyle += `padding-top:${newItem.margin.top * 2}rpx;`;
+						newItem.pageStyle += `padding-bottom:${newItem.margin.bottom * 2}rpx;`;
+						newItem.pageStyle += `padding-right:${newItem.margin.both * 2}rpx;`;
+						newItem.pageStyle += `padding-left:${newItem.margin.both * 2}rpx;`;
+					}
+				}
+				
+				return newItem;
+			});
+		}
+	}
 };
 </script>