Merge pull request #1451 from jumpserver/pr@dev@perf_add_action

perf：Modify the tree structure to add actions

ui/src/components/Kubernetes/Tree/index.scss

@@ -34,6 +34,7 @@
       margin-left: 15px;
 
       .n-collapse-item__content-inner {
+        padding-right: 10px;
         padding-top: 0;
 
         .tree-item .n-tree-node-wrapper {

ui/src/components/Kubernetes/Tree/index.vue

@@ -1,21 +1,49 @@
 <template>
-    <div>
+    <div class="group">
         <n-descriptions label-placement="top" class="tree-wrapper">
             <template #header>
                 <n-flex align="center" justify="space-between">
                     {{ t('KubernetesManagement') }}
                 </n-flex>
             </template>
             <n-descriptions-item class="h-full">
-                <n-collapse arrow-placement="left" :default-expanded-names="['asset-tree']">
+                <n-collapse arrow-placement="left" :accordion="true" :default-expanded-names="['asset-tree']">
                     <n-scrollbar style="max-height: calc(100vh - 100px)">
                         <n-collapse-item :title="treeNodes[0]?.label" class="collapse-item" name="asset-tree">
-                            <!-- <template #header>-->
-                            <!--     <n-icon :component="Kubernetes" size="18" />-->
-                            <!--     <n-text>-->
-                            <!--         {{ treeNodes[0]?.label }}-->
-                            <!--     </n-text>-->
-                            <!-- </template>-->
+                            <template #header-extra>
+                                <n-flex
+                                    justify="center"
+                                    style="gap: 8px 5px !important"
+                                    class="mr-[10px] !hidden group-hover:!flex"
+                                >
+                                    <template v-for="option of buttonGroups" :key="option.label">
+                                        <n-popover>
+                                            <template #trigger>
+                                                <n-button
+                                                    text
+                                                    class="w-[20px] h-[20px] p-[2px] hover:!bg-[#5A5D5E4F] rounded-[5px]"
+                                                    @click="
+                                                        (e: Event) => {
+                                                            option.click(e);
+                                                        }
+                                                    "
+                                                >
+                                                    <n-icon size="16" :component="option.icon" />
+                                                </n-button>
+                                            </template>
+                                            {{ option.label }}
+                                        </n-popover>
+                                    </template>
+                                </n-flex>
+                            </template>
+                            <n-input
+                                clearable
+                                size="small"
+                                placeholder="搜索"
+                                class="mb-[3px] pl-[4px]"
+                                v-if="showSearch"
+                                v-model:value="searchPattern"
+                            />
                             <n-tree
                                 cascade
                                 show-line
@@ -25,13 +53,13 @@
                                 class="tree-item"
                                 check-strategy="all"
                                 checkbox-placement="left"
-                                :render-label="showToolTip"
-                                :data="treeNodes[0]?.children"
                                 :node-props="nodeProps"
-                                :on-load="useDebounceFn(handleOnLoad, 300)"
                                 :pattern="searchPattern"
+                                :render-label="showToolTip"
+                                :data="treeNodes[0]?.children"
                                 :expanded-keys="expandedKeysRef"
                                 :allow-checking-not-loaded="true"
+                                :on-load="useDebounceFn(handleOnLoad, 300)"
                                 :on-update:expanded-keys="handleExpandCollapse"
                             />
                         </n-collapse-item>
@@ -65,23 +93,25 @@ import { useTreeStore } from '@/store/modules/tree.ts';
 
 import mittBus from '@/utils/mittBus.ts';
 
-// import { Kubernetes } from '@vicons/carbon';
 import { Folder, FolderOpen } from '@vicons/fa';
-import { NIcon, TreeOption, DropdownOption } from 'naive-ui';
 import { Link, ExpandCategories } from '@vicons/carbon';
+import { NIcon, TreeOption, DropdownOption } from 'naive-ui';
+import { RefreshRound, LocationSearchingOutlined } from '@vicons/material';
 
 const { t } = useI18n();
 const treeStore = useTreeStore();
 
-const { treeNodes } = storeToRefs(treeStore);
+const { treeNodes, currentNode } = storeToRefs(treeStore);
 
 const emits = defineEmits<{
     (e: 'sync-load-node', data: TreeOption): void;
+    (e: 'reload-tree'): void;
 }>();
 
 const dropdownY = ref(0);
 const dropdownX = ref(0);
 const searchPattern = ref('');
+const showSearch = ref(false);
 const showDropdown = ref(false);
 const currentNodeInfo = ref();
 const expandedKeysRef = ref<string[]>([]);
@@ -101,6 +131,30 @@ const allOptions = [
         icon: () => h(NIcon, null, { default: () => h(Link) })
     }
 ];
+const buttonGroups = [
+    {
+        label: t('link'),
+        icon: Link,
+        click: (e: Event) => {
+            handleRootLink(e);
+        }
+    },
+    {
+        label: t('search'),
+        icon: LocationSearchingOutlined,
+        click: (e: Event) => {
+            e.stopPropagation();
+            showSearch.value = !showSearch.value;
+        }
+    },
+    {
+        label: t('refresh'),
+        icon: RefreshRound,
+        click: () => {
+            emits('reload-tree');
+        }
+    }
+];
 
 /**
  * @description 处理节点展开
@@ -134,7 +188,8 @@ const handleExpandCollapse = (
 };
 
 /**
- * @description 处理节点行为
+ * 处理节点行为
+ *
  * @param option
  */
 const nodeProps = ({ option }: { option: TreeOption }) => {
@@ -159,6 +214,11 @@ const nodeProps = ({ option }: { option: TreeOption }) => {
     };
 };
 
+/**
+ * 过滤右键菜单行为
+ *
+ * @param option
+ */
 const handleFilter = (option: TreeOption) => {
     dropdownOptions.value = allOptions.filter(item => {
         if (option.isLeaf) {
@@ -171,6 +231,11 @@ const handleFilter = (option: TreeOption) => {
     });
 };
 
+/**
+ * 加载节点
+ *
+ * @param node
+ */
 const handleOnLoad = (node: TreeOption) => {
     let expendKey: string;
 
@@ -192,6 +257,12 @@ const handleOnLoad = (node: TreeOption) => {
     return false;
 };
 
+/**
+ * 右键菜单触发行为
+ *
+ * @param key
+ * @param _option
+ */
 const handleSelect = (key: string, _option: DropdownOption) => {
     showDropdown.value = false;
 
@@ -207,6 +278,14 @@ const handleSelect = (key: string, _option: DropdownOption) => {
     }
 };
 
+/**
+ * 根节点连接
+ */
+const handleRootLink = (e: Event) => {
+    e.stopPropagation();
+    mittBus.emit('connect-terminal', currentNode.value);
+};
+
 const handleClickOutside = () => {
     showDropdown.value = false;
 };

ui/src/hooks/useK8s.ts

@@ -1,7 +1,7 @@
 import { NIcon } from 'naive-ui';
 import { v4 as uuid } from 'uuid';
 import { Folder } from '@vicons/fa';
-import { Kubernetes } from '@vicons/carbon';
+import { Cube16Regular } from '@vicons/fluent';
 
 import { ref, h } from 'vue';
 import { storeToRefs } from 'pinia';
@@ -124,9 +124,9 @@ export const useK8s = () => {
             childNode.prefix = () =>
                 h(
                     NIcon,
-                    { size: 20 },
+                    { size: 16 },
                     {
-                        default: () => h(Kubernetes)
+                        default: () => h(Cube16Regular)
                     }
                 );
         }
@@ -203,11 +203,18 @@ export const useK8s = () => {
         }
     };
 
+    /**
+     * 重新加载
+     */
+    const reload = (url: string) => {
+        createTreeConnect(url);
+    };
+
     /**
      * 创建 Tree 的 Socket 连接
      */
-    const createTreeConnect = () => {
-        const connectURL = generateWsURL();
+    const createTreeConnect = (url?: string) => {
+        const connectURL = url ? url : generateWsURL();
 
         const { ws } = useWebSocket(connectURL, {
             protocols: ['JMS-KOKO'],
@@ -231,6 +238,7 @@ export const useK8s = () => {
     };
 
     return {
+        reload,
         syncLoadNodes,
         createTreeConnect
     };

ui/src/views/Kubernetes/index.vue

@@ -17,6 +17,7 @@
             collapse-mode="width"
             content-style="padding: 24px;"
             v-draggable="sideWidth"
+            class="transition-width duration-300"
             :width="sideWidth"
             :collapsed-width="0"
             :native-scrollbar="false"
@@ -33,6 +34,7 @@
                     'opacity-100': !isFolded
                 }"
                 @sync-load-node="handleSyncLoad"
+                @reload-tree="handleReloadTree"
             />
         </n-layout-sider>
         <MainContent :socket="socket" />
@@ -50,9 +52,10 @@ import SideTop from '@/components/Kubernetes/Sidebar/sideTop.vue';
 import MainContent from '@/components/Kubernetes/MainContent/index.vue';
 import ContentHeader from '@/components/Kubernetes/ContentHeader/index.vue';
 
-// 导入 API
 import { onMounted, onUnmounted, ref } from 'vue';
+import { BASE_WS_URL } from '@/config';
 
+const socket = ref();
 const sideWidth = ref(300);
 const isFolded = ref(false);
 
@@ -61,12 +64,35 @@ const handleTreeClick = () => {
     sideWidth.value = isFolded.value ? 0 : 300;
 };
 
-const { createTreeConnect, syncLoadNodes } = useK8s();
+const { createTreeConnect, syncLoadNodes, reload } = useK8s();
 
-const socket = createTreeConnect();
+socket.value = createTreeConnect();
 
 const handleSyncLoad = (node: TreeOption) => {
     syncLoadNodes(node);
+
+    // 根据节点宽度自动拓宽
+    setTimeout(() => {
+        const tableElement = document.querySelector('.n-descriptions-table') as HTMLElement;
+        const sideElement = document.querySelector('.n-layout-sider') as HTMLElement;
+
+        if (tableElement && sideElement) {
+            const tableWidth = tableElement.clientWidth;
+
+            sideElement.style.width = `${tableWidth}px`;
+        }
+    }, 300);
+};
+
+const handleReloadTree = () => {
+    if (socket.value) {
+        socket.value.close();
+    }
+
+    const urlParams = new URLSearchParams(window.location.search.slice(1));
+    const connectURL = urlParams ? `${BASE_WS_URL}/koko/ws/token/?${urlParams.toString()}` : '';
+
+    reload(connectURL);
 };
 
 onMounted(() => {