From d6e75a7b2123a2c980f727c337a6211dfa5febd0 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Wed, 5 Feb 2025 01:36:34 -0800
Subject: [PATCH 1/5] fix: outline tree width not engout when tree is very deep
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复大纲树层级过深时，宽度不够，没有自动横向滚动的 bug
---
 packages/plugins/tree/src/Main.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 0c60939fc5..2864916dfb 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -18,6 +18,7 @@
           :highlight-hover-row="false"
           :auto-resize="true"
           :row-class-name="getClassName"
+          :style="{ width: treeWidth }"
         >
           <tiny-grid-column field="componentName" tree-node>
             <template #default="data">
@@ -80,9 +81,12 @@ export default {
     const { PLUGIN_NAME } = useLayout()
 
     const panelFixed = computed(() => props.fixedPanels?.includes(PLUGIN_NAME.OutlineTree))
+    const maxDepth = ref(1)
+    const treeWidth = computed(() => `${maxDepth.value * 16 + 120}px`)
 
     const filterSchema = (data) => {
-      const translateChild = (data) => {
+      const translateChild = (data, depth = 0) => {
+        let tempMaxDepth = depth
         data.forEach((item) => {
           item.show = pageState.nodesStatus[item.id] !== false
           item.showEye = !item.show
@@ -91,12 +95,19 @@ export default {
             delete item.children
           } else {
             if (item.children.length) {
-              translateChild(item.children)
+              const { maxDepth: curDepth } = translateChild(item.children)
+
+              if (curDepth > maxDepth.value) {
+                maxDepth.value = curDepth
+              }
             }
           }
         })
 
-        return data
+        return {
+          data,
+          maxDepth: tempMaxDepth
+        }
       }
 
       return [{ ...translateChild([extend(true, {}, data)])[0], componentName: 'body' }]
@@ -294,7 +305,8 @@ export default {
       toggleTree,
       getClassName,
       PLUGIN_NAME,
-      renderIconFn
+      renderIconFn,
+      treeWidth
     }
   }
 }

From 11dcd90fde210207e6d2e1483112eb52fdf0ae89 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Wed, 5 Feb 2025 01:44:05 -0800
Subject: [PATCH 2/5] fix: add code comment

---
 packages/plugins/tree/src/Main.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 2864916dfb..b4aa794269 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -82,6 +82,7 @@ export default {
 
     const panelFixed = computed(() => props.fixedPanels?.includes(PLUGIN_NAME.OutlineTree))
     const maxDepth = ref(1)
+    // 树宽度：最大深度 * 16 + 120，其中 16 为每层缩进的宽度(tiny-grid 默认的缩进宽度)，120 为树的最小宽度
     const treeWidth = computed(() => `${maxDepth.value * 16 + 120}px`)
 
     const filterSchema = (data) => {

From 19cd805dc63c0bfbc34d38865cc0fa3caf49b20c Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Wed, 5 Feb 2025 01:55:56 -0800
Subject: [PATCH 3/5] fix: add min 280 width

---
 packages/plugins/tree/src/Main.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index b4aa794269..14ec9d13e2 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -83,7 +83,7 @@ export default {
     const panelFixed = computed(() => props.fixedPanels?.includes(PLUGIN_NAME.OutlineTree))
     const maxDepth = ref(1)
     // 树宽度：最大深度 * 16 + 120，其中 16 为每层缩进的宽度(tiny-grid 默认的缩进宽度)，120 为树的最小宽度
-    const treeWidth = computed(() => `${maxDepth.value * 16 + 120}px`)
+    const treeWidth = computed(() => `${Math.max(maxDepth.value * 16 + 120, 280)}px`)
 
     const filterSchema = (data) => {
       const translateChild = (data, depth = 0) => {
@@ -111,7 +111,7 @@ export default {
         }
       }
 
-      return [{ ...translateChild([extend(true, {}, data)])[0], componentName: 'body' }]
+      return [{ ...translateChild([extend(true, {}, data)]).data[0], componentName: 'body' }]
     }
     const state = reactive({
       pageSchema: [],

From a0c74dacbd00fc52088aa90adf25a330cbd9b6bd Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Wed, 5 Feb 2025 02:12:25 -0800
Subject: [PATCH 4/5] fix: add missing params, reset maxDepth before recompute

---
 packages/plugins/tree/src/Main.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 14ec9d13e2..73e79a84b3 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -86,6 +86,7 @@ export default {
     const treeWidth = computed(() => `${Math.max(maxDepth.value * 16 + 120, 280)}px`)
 
     const filterSchema = (data) => {
+      maxDepth.value = 0
       const translateChild = (data, depth = 0) => {
         let tempMaxDepth = depth
         data.forEach((item) => {
@@ -96,7 +97,7 @@ export default {
             delete item.children
           } else {
             if (item.children.length) {
-              const { maxDepth: curDepth } = translateChild(item.children)
+              const { maxDepth: curDepth } = translateChild(item.children, depth + 1)
 
               if (curDepth > maxDepth.value) {
                 maxDepth.value = curDepth

From 87d776ba1faf53d8e6815573b0d9de8f1648445a Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Wed, 5 Feb 2025 18:01:18 -0800
Subject: [PATCH 5/5] fix: optimize maxDepth algorithms

---
 packages/plugins/tree/src/Main.vue | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 73e79a84b3..a724d93ec3 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -88,7 +88,10 @@ export default {
     const filterSchema = (data) => {
       maxDepth.value = 0
       const translateChild = (data, depth = 0) => {
-        let tempMaxDepth = depth
+        if (depth > maxDepth.value) {
+          maxDepth.value = depth
+        }
+
         data.forEach((item) => {
           item.show = pageState.nodesStatus[item.id] !== false
           item.showEye = !item.show
@@ -97,22 +100,15 @@ export default {
             delete item.children
           } else {
             if (item.children.length) {
-              const { maxDepth: curDepth } = translateChild(item.children, depth + 1)
-
-              if (curDepth > maxDepth.value) {
-                maxDepth.value = curDepth
-              }
+              translateChild(item.children, depth + 1)
             }
           }
         })
 
-        return {
-          data,
-          maxDepth: tempMaxDepth
-        }
+        return data
       }
 
-      return [{ ...translateChild([extend(true, {}, data)]).data[0], componentName: 'body' }]
+      return [{ ...translateChild([extend(true, {}, data)])[0], componentName: 'body' }]
     }
     const state = reactive({
       pageSchema: [],