fix(ObjectTree): Edit the ObjectTree component to correct the info page error

Author: SpliiT

components/Viewer/Tree/ObjectTree.vue

@@ -47,25 +47,25 @@
   const cardContainer = useTemplateRef("cardContainer")
   const containerWidth = ref(window.innerWidth)
   const containerHeight = ref(window.innerHeight)
-
   const menuX = ref(0)
   const menuY = ref(0)
   const id = ref(null)
 
-  const emit = defineEmits(["show-menu", "position-menu"])
+  const handleResize = () => {
+    containerWidth.value = window.innerWidth
+    containerHeight.value = window.innerHeight
+  }
 
   function handleTreeMenu({ event, itemId }) {
     menuX.value = event.clientX
     menuY.value = event.clientY
     id.value = itemId
-
     menuStore.openMenu(itemId, event.clientX, event.clientY)
   }
 
   function onResizeStart(event) {
     const startWidth = treeviewStore.panelWidth
     const startX = event.clientX
-
     const resize = (e) => {
       const deltaX = e.clientX - startX
       const newWidth = Math.max(
@@ -75,29 +75,23 @@
       treeviewStore.setPanelWidth(newWidth)
       document.body.style.userSelect = "none"
     }
-
     const stopResize = () => {
       document.removeEventListener("mousemove", resize)
       document.removeEventListener("mouseup", stopResize)
       document.body.style.userSelect = ""
     }
-
     document.addEventListener("mousemove", resize)
     document.addEventListener("mouseup", stopResize)
   }
 
   onMounted(() => {
     containerWidth.value = window.innerWidth
     containerHeight.value = window.innerHeight
-
-    window.addEventListener("resize", () => {
-      containerWidth.value = window.innerWidth
-      containerHeight.value = window.innerHeight
-    })
+    window.addEventListener("resize", handleResize)
   })
 
   onUnmounted(() => {
-    window.removeEventListener("resize")
+    window.removeEventListener("resize", handleResize)
   })
 </script>
 
@@ -113,20 +107,17 @@
     display: flex;
     box-sizing: border-box;
   }
-
   .resizable-panel {
     display: flex;
     height: 100%;
     position: relative;
     box-sizing: border-box;
   }
-
   .scrollable-wrapper {
     overflow-y: auto;
     padding-right: 6px;
     flex: 1;
   }
-
   .resizer {
     position: absolute;
     top: 0;
@@ -137,32 +128,25 @@
     background-color: transparent;
     z-index: 15;
   }
-
   .resizer:hover {
     background-color: #999;
   }
-
   .resizer:active {
     background-color: #666;
   }
-
   .transparent-treeview {
     background-color: transparent;
     margin: 4px 0;
   }
-
   .scrollbar-hover {
     overflow-x: hidden;
   }
-
   .scrollbar-hover::-webkit-scrollbar {
     width: 5px;
   }
-
   .scrollbar-hover::-webkit-scrollbar-thumb {
     background-color: transparent;
   }
-
   .scrollbar-hover:hover::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.3);
     border-radius: 10px;