refactor(components-diy/diy-group): 重构组件数据处理逻辑

1. 替换原有的深拷贝方式为显式使用$util.deepClone
2. 拆分数据初始化和监听逻辑，新增processedData存储处理后的数据
3. 重构topNavColor计算属性，简化逻辑代码
4. 抽离组件数据处理为独立的processData方法
5. 优化diyDataArray计算属性的过滤和处理流程

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() {
+	watch: {
-		try {
+		diyData: {
-			this.diyGlobalData = JSON.parse(JSON.stringify(this.diyData));
+			handler() {
-		} catch (e) {
+				this.diyGlobalData = this.diyData ? this.$util.deepClone(this.diyData) : null;
-			console.error(e);
+				this.processData();
+			},
+			deep: true
 		}
 	},
+	created() {
+		this.processData();
+	},
 	computed: {
 		topNavColor() {
-			var color = '';
+			if (!this.diyData?.global) return '';
-			if (this.diyData.global.topNavBg) {
+
-				color = 'transparent';
+			const { topNavBg, topNavColor } = this.diyData.global;
-				if (this.scrollTop > 20) {
+			
-					color = this.diyData.global.topNavColor;
+			if (topNavBg) {
-				} else {
+				return this.scrollTop > 20 ? topNavColor : 'transparent';
-					color = 'transparent';
-				}
-			} else {
-				color = this.diyData.global.topNavColor;
 			}
-			return color;
+			
-		},
+			return topNavColor;
-		// 修改属性样式
-		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;
 		},
 		// 过滤组件的渲染
 		diyDataArray() {
-			let data = [],
+			if (!this.processedData) {
-				showModuleData = this.$store.state.diyGroupShowModule ? JSON.parse(this.$store.state
+				this.processData();
-					.diyGroupShowModule) : '';
+			}
+			
+			const showModuleData = this.$store.state.diyGroupShowModule 
+				? JSON.parse(this.$store.state.diyGroupShowModule) 
+				: null;
 
-			if (showModuleData.length) {
+			if (!showModuleData || !showModuleData.length) {
-				if (showModuleData.includes('null')) return [];
+				return this.processedData || [];
+			}
 
-				let diyDataArr = this.setPagestyle;
+			if (showModuleData.includes('null')) {
-				diyDataArr.forEach((item, index) => {
+				return [];
-					if (showModuleData.includes(item.componentName)) {
+			}
-						data.push(item);
-					}
-				});
-			} else data = this.setPagestyle;
 
-			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>