代码优化

web/src/views/testdata/fileSynchronization/index.vue

@@ -272,6 +272,9 @@ function gettreedata() {
 }
 function handleNodeClick(data: any, node: any) {
     pathid.value = data.nodeId
+    localOnlyFiles.value.length = 0
+    md5MismatchedFiles.value.length = 0
+    minioOnlyFiles.value.length = 0
     getlocaltree()
     getminiotree()
 }
@@ -297,9 +300,14 @@ const handleCheckChange = (
 
     // 使用防抖优化批量操作
     const updateCompare = debounce(() => {
-    comparearr.value = getclickdata(workall.value);
+        const compareNodes = getclickdata(workall.value);
-    // 同步备份空间的选中状态
+
-    beifentree.value?.setCheckedNodes(comparearr.value, false);
+        // 转换节点格式
+        const checkedKeys = compareNodes
+            .map(node => node.id)
+        nextTick(() => {
+            beifentree.value?.setCheckedKeys(checkedKeys, false);
+        });
     }, 50);
 
     updateCompare();
@@ -339,48 +347,78 @@ function getclickdata(nodes: any[]): any[] {
 }
 //获取本地树
 function getlocaltree() {
+    if (!projectId.value || !pathid.value) return;
 
-    if(projectId.value && pathid.value){
+    worktree.value = true;
-        worktree.value = true
     listLocalTree({ taskId: projectId.value, nodeId: pathid.value }).then((res: any) => {
-        workdata.value = res.data.localTrees
+        const CHUNK_SIZE = 500; // 每批处理500个节点
-        if (workdata.value.length > 0) {
+        const rawData = res.data.localTrees;
-            assignment(workdata.value, 'local')
+
-        }
+        // 使用requestAnimationFrame分批次处理
-        worktree.value = false
+        const processChunk = (index = 0) => {
-        diffColor()
+            const chunk = rawData.slice(index, index + CHUNK_SIZE);
-    })
+            if (chunk.length > 0) {
+                assignment(chunk, 'local');
+                workdata.value.push(...chunk); // 分批追加数据
+                requestAnimationFrame(() => processChunk(index + CHUNK_SIZE));
+            } else {
+                worktree.value = false;
+                diffColor();
             }
+        };
+
+        workdata.value = []; // 清空旧数据
+        processChunk();
+    });
 }
 const worktree1 = ref(false)
 //获取minio树
 function getminiotree() {
-    if(projectId.value && pathid.value){
+    if (!projectId.value || !pathid.value) return;
-        worktree1.value = true
+
+    worktree1.value = true;
     listBackupTree({ taskId: projectId.value, nodeId: pathid.value }).then((res: any) => {
-        backupsdata.value = res.data.minioTrees
+        const CHUNK_SIZE = 500;
-        if (backupsdata.value.length > 0) {
+        const rawData = res.data.minioTrees;
-            assignment(backupsdata.value, 'minio')
+
-        }
+        const processChunk = (index = 0) => {
-        worktree1.value = false
+            const chunk = rawData.slice(index, index + CHUNK_SIZE);
-        diffColor()
+            if (chunk.length > 0) {
-    })
+                assignment(chunk, 'minio');
+                backupsdata.value.push(...chunk);
+                requestAnimationFrame(() => processChunk(index + CHUNK_SIZE));
+            } else {
+                worktree1.value = false;
+                diffColor();
             }
+        };
+
+        backupsdata.value = [];
+        processChunk();
+    });
 }
 //数据递归赋值
 function assignment(data: any[], difference: 'local' | 'minio') {
-    // 使用栈结构替代递归，防止栈溢出
+    const queue = [...data]; // 使用队列代替栈
-    const stack: any[] = [...data];
+    while (queue.length > 0) {
-    while (stack.length > 0) {
+        const node = queue.shift();
-        const node = stack.pop();
         if (!node) continue;
-        // 添加类型断言确保操作安全
-        node.location = difference;
-        node.station = '0'; // 0: 相同, 1: 新增, 2: 变更, 3: 删除
 
-        // 反向压栈保持原有顺序
+        // 使用Object.defineProperty避免Vue响应式转换
+        Object.defineProperty(node, 'location', {
+            value: difference,
+            writable: true,
+            enumerable: true
+        });
+
+        Object.defineProperty(node, 'station', {
+            value: '0',
+            writable: true,
+            enumerable: true
+        });
+
         if (node.children?.length) {
-            stack.push(...[...node.children].reverse());
+            queue.push(...node.children);
         }
     }
 }
@@ -409,12 +447,17 @@ const backupsChange = (
     }
 
     // 使用防抖优化批量操作
-  const updateCompare = debounce(() => {
-    comparearr.value = getclickdata(workall.value);
-    // 同步工作空间选中状态
-    workref.value?.setCheckedNodes(comparearr.value, false);
-  }, 50);
 
+    const updateCompare = debounce(() => {
+        const compareNodes = getclickdata(workall.value);
+
+        // 转换节点格式
+        const checkedKeys = compareNodes
+            .map(node => node.id)
+        nextTick(() => {
+            workref.value?.setCheckedKeys(checkedKeys, false);
+        });
+    }, 50);
     updateCompare();
 };
 //右键菜单
@@ -929,8 +972,8 @@ const tabs = ref(1)
                 <div class="tree_left">
                     <div class="tree_title">工作空间:</div>
                     <div class="tree_content">
-                        <el-scrollbar height="73vh">
+                        <!-- <el-scrollbar height="73vh"> -->
-                            <el-tree ref="workref" style="max-width: 600px" :props="props" :data="workdata"
+                        <el-tree-v2 ref="workref" style="max-width: 600px" :props="props" :data="workdata" :height="700"
                             @node-click="workclick" @node-contextmenu="handleRightClick" default-expand-all
                             :expand-on-click-node="false" show-checkbox node-key="id" v-loading="worktree"
                             @check-change="handleCheckChange">
@@ -946,7 +989,7 @@ const tabs = ref(1)
                                     </span>
                                 </span>
                             </template>
-                            </el-tree>
+                        </el-tree-v2>
                         <div v-show="contextMenuVisible" class="context-menu" :style="{
                             left: `${contextMenuPosition.x}px`,
                             top: `${contextMenuPosition.y}px`
@@ -956,18 +999,18 @@ const tabs = ref(1)
                             <div v-if="currentNode && currentNode.isFile == 'FILE'" class="menu-item"
                                 @click="handleMenuClick('preview', 'local')">预览</div>
                         </div>
-                        </el-scrollbar>
+                        <!-- </el-scrollbar> -->
 
                     </div>
                 </div>
                 <div class="tree_left">
                     <div class="tree_title">备份空间:</div>
                     <div class="tree_content">
-                        <el-scrollbar height="73vh">
+                        <!-- <el-scrollbar height="73vh"> -->
-                            <el-tree ref="beifentree" style="max-width: 600px" :props="props" :data="backupsdata"
+                        <el-tree-v2 ref="beifentree" style="max-width: 600px" :props="props" :data="backupsdata"
-                                default-expand-all @node-click="workclick" @node-contextmenu="handleRightClick"
+                            :height="700" default-expand-all @node-click="workclick"
-                                :expand-on-click-node="false" show-checkbox node-key="id" v-loading="worktree1"
+                            @node-contextmenu="handleRightClick" :expand-on-click-node="false" show-checkbox
-                                @check-change="backupsChange">
+                            node-key="id" v-loading="worktree1" @check-change="backupsChange">
                             <template #default="{ data }">
                                 <span
                                     :class="data.station == '0' ? 'custom-tree-node' : (data.station == '1' ? 'custom-tree-node1' : (data.station == '2' ? 'custom-tree-node2' : 'custom-tree-node3'))">
@@ -980,7 +1023,7 @@ const tabs = ref(1)
                                             == '2' ? '已变更' : '已删除') }})</span>
                                 </span>
                             </template>
-                            </el-tree>
+                        </el-tree-v2>
                         <div v-show="contextMenuVisible2" class="context-menu" :style="{
                             left: `${contextMenuPosition.x}px`,
                             top: `${contextMenuPosition.y}px`
@@ -990,7 +1033,7 @@ const tabs = ref(1)
                             <div v-if="currentNode && currentNode.isFile == 'FILE'" class="menu-item"
                                 @click="handleMenuClick('preview', 'minio')">预览</div>
                         </div>
-                        </el-scrollbar>
+                        <!-- </el-scrollbar> -->
 
                     </div>
                 </div>