perf：tree item show

jumpserver · Sep 3, 2024 · 6b8e948 · 6b8e948
1 parent 0b4ec75
commit 6b8e948
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 10 deletions.
diff --git a/ui/src/components/Kubernetes/Tree/index.scss b/ui/src/components/Kubernetes/Tree/index.scss
@@ -34,7 +34,7 @@
       margin-left: 15px;
 
       .n-collapse-item__content-inner {
-        padding-right: 10px;
+        padding-right: 15px;
         padding-top: 0;
 
         .tree-item .n-tree-node-wrapper {
@@ -46,6 +46,8 @@
 
             .n-tree-node-content__text {
               white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
             }
           }
         }

diff --git a/ui/src/directive/sidebarDraggable.ts b/ui/src/directive/sidebarDraggable.ts
@@ -12,14 +12,17 @@ export const draggable = {
             if (newWidth >= 300 && newWidth <= 600) {
                 el.style.width = `${newWidth}px`;
 
-                // 更新传递的 ref 变量
-                binding.value = newWidth;
+                binding.value.width = newWidth;
             }
         };
 
         const mouseUpHandler = () => {
             document.removeEventListener('mousemove', mouseMoveHandler);
             document.removeEventListener('mouseup', mouseUpHandler);
+
+            if (binding.value.onDragEnd && typeof binding.value.onDragEnd === 'function') {
+                binding.value.onDragEnd(el, binding.value.width);
+            }
         };
 
         const mouseDownHandler = (event: MouseEvent) => {

diff --git a/ui/src/views/Kubernetes/index.vue b/ui/src/views/Kubernetes/index.vue
@@ -16,7 +16,7 @@
             collapsed
             collapse-mode="width"
             content-style="padding: 24px;"
-            v-draggable="sideWidth"
+            v-draggable="{ width: sideWidth, onDragEnd: handleDragEnd }"
             class="transition-width duration-300"
             :width="sideWidth"
             :collapsed-width="0"
@@ -52,22 +52,22 @@ import SideTop from '@/components/Kubernetes/Sidebar/sideTop.vue';
 import MainContent from '@/components/Kubernetes/MainContent/index.vue';
 import ContentHeader from '@/components/Kubernetes/ContentHeader/index.vue';
 
-import { onMounted, onUnmounted, ref } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { BASE_WS_URL } from '@/config';
 
 const socket = ref();
 const sideWidth = ref(300);
 const isFolded = ref(false);
 
-const handleTreeClick = () => {
-    isFolded.value = !isFolded.value;
-    sideWidth.value = isFolded.value ? 0 : 300;
-};
-
 const { createTreeConnect, syncLoadNodes, reload } = useK8s();
 
 socket.value = createTreeConnect();
 
+/**
+ * 加载节点
+ *
+ * @param node
+ */
 const handleSyncLoad = (node: TreeOption) => {
     syncLoadNodes(node);
 
@@ -79,11 +79,23 @@ const handleSyncLoad = (node: TreeOption) => {
         if (tableElement && sideElement) {
             const tableWidth = tableElement.clientWidth;
 
+            sideWidth.value = tableWidth;
             sideElement.style.width = `${tableWidth}px`;
         }
     }, 300);
 };
 
+/**
+ * 点击 Tree 图标的回调
+ */
+const handleTreeClick = () => {
+    isFolded.value = !isFolded.value;
+    sideWidth.value = isFolded.value ? 0 : 300;
+};
+
+/**
+ * 重新加载
+ */
 const handleReloadTree = () => {
     if (socket.value) {
         socket.value.close();
@@ -95,6 +107,14 @@ const handleReloadTree = () => {
     reload(connectURL);
 };
 
+const handleDragEnd = (_el: HTMLElement, newWidth: number) => {
+    const tableElement = document.querySelector('.n-collapse') as HTMLElement;
+
+    nextTick(() => {
+        tableElement.style.width = newWidth + 'px';
+    });
+};
+
 onMounted(() => {
     mittBus.on('fold-tree-click', handleTreeClick);
 });