From 81d3a731433e932714a7c64c3fa59ce3bc733129 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Wed, 4 Sep 2024 15:21:43 +0800
Subject: [PATCH] perf: Substitution watermark and icons

---
 ui/package.json                               |  1 +
 .../Kubernetes/MainContent/index.vue          | 15 ++---
 .../Sidebar/components/Tree/index.vue         |  6 +-
 ui/src/components/Kubernetes/Tree/index.scss  |  8 ++-
 ui/src/components/Kubernetes/Tree/index.vue   | 60 ++++++++++++-------
 ui/src/components/Kubernetes/helper/index.ts  |  2 +-
 ui/src/hooks/useK8s.ts                        | 48 +++++++--------
 ui/src/index.css                              |  4 ++
 ui/yarn.lock                                  |  5 ++
 9 files changed, 89 insertions(+), 60 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 7b7c9ffa..16654285 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -38,6 +38,7 @@
     "@vicons/fluent": "^0.12.0",
     "@vicons/ionicons5": "^0.12.0",
     "@vicons/material": "^0.12.0",
+    "@vicons/tabler": "^0.12.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.39",
diff --git a/ui/src/components/Kubernetes/MainContent/index.vue b/ui/src/components/Kubernetes/MainContent/index.vue
index a2185dcd..9131e091 100644
--- a/ui/src/components/Kubernetes/MainContent/index.vue
+++ b/ui/src/components/Kubernetes/MainContent/index.vue
@@ -24,14 +24,15 @@
                     <n-watermark
                         cross
                         selectable
-                        :rotate="-15"
-                        :font-size="16"
-                        :width="192"
-                        :height="128"
-                        :x-offset="12"
-                        :y-offset="28"
+                        :rotate="-45"
+                        :font-size="20"
+                        :width="300"
+                        :height="300"
                         :content="waterMarkContent"
-                        :line-height="16"
+                        :line-height="20"
+                        :x-offset="-60"
+                        :y-offset="60"
+                        :font-family="'Open Sans'"
                     >
                         <CustomTerminal
                             ref="terminalRef"
diff --git a/ui/src/components/Kubernetes/Sidebar/components/Tree/index.vue b/ui/src/components/Kubernetes/Sidebar/components/Tree/index.vue
index 389a4886..15fff0a6 100644
--- a/ui/src/components/Kubernetes/Sidebar/components/Tree/index.vue
+++ b/ui/src/components/Kubernetes/Sidebar/components/Tree/index.vue
@@ -6,9 +6,9 @@
         :class="{ active: isActive }"
     >
         <n-icon
-            :component="TreeIcon"
+            :component="Kubernetes"
             color="#646A73"
-            size="26"
+            size="30"
             class="hover:!text-white transition-all duration-300 cursor-pointer tree-icon"
         />
     </n-button>
@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Tree as TreeIcon } from '@vicons/carbon';
+import { Kubernetes } from '@vicons/carbon';
 
 import mittBus from '@/utils/mittBus.ts';
 
diff --git a/ui/src/components/Kubernetes/Tree/index.scss b/ui/src/components/Kubernetes/Tree/index.scss
index 608fa5c0..be1e3e34 100644
--- a/ui/src/components/Kubernetes/Tree/index.scss
+++ b/ui/src/components/Kubernetes/Tree/index.scss
@@ -26,6 +26,7 @@
             .n-collapse-item__header-main {
                 height: 22px;
                 margin-left: 5px;
+                font-size: 13px;
             }
         }
 
@@ -38,8 +39,10 @@
                 padding-top: 0;
 
                 .tree-item .n-tree-node-wrapper {
-                    padding: 0 0 5px 0;
-                    line-height: 22px;
+                    //padding: 0 0 5px 0;
+                    padding: 0;
+                    line-height: 17px;
+                    font-size: 13px;
 
                     .n-tree-node-content {
                         padding-left: 5px;
@@ -48,6 +51,7 @@
                             white-space: nowrap;
                             overflow: hidden;
                             text-overflow: ellipsis;
+                            font-size: 13px;
                         }
                     }
                 }
diff --git a/ui/src/components/Kubernetes/Tree/index.vue b/ui/src/components/Kubernetes/Tree/index.vue
index cb715c34..1a407c41 100644
--- a/ui/src/components/Kubernetes/Tree/index.vue
+++ b/ui/src/components/Kubernetes/Tree/index.vue
@@ -28,7 +28,7 @@
                                                         }
                                                     "
                                                 >
-                                                    <n-icon size="16" :component="option.icon" />
+                                                    <n-icon size="13" :component="option.icon" />
                                                 </n-button>
                                             </template>
                                             {{ option.label }}
@@ -92,7 +92,9 @@ import { useTreeStore } from '@/store/modules/tree.ts';
 
 import mittBus from '@/utils/mittBus.ts';
 
-import { Link, ExpandCategories } from '@vicons/carbon';
+import { Folder, FolderOpen } from '@vicons/fa';
+import { ExpandCategories } from '@vicons/carbon';
+import { Terminal2 } from '@vicons/tabler';
 import { NIcon, TreeOption, DropdownOption } from 'naive-ui';
 import { RefreshRound, LocationSearchingOutlined } from '@vicons/material';
 
@@ -120,19 +122,19 @@ const allOptions = [
         label: '展开',
         key: 'expand',
         // disabled: true,
-        icon: () => h(NIcon, null, { default: () => h(ExpandCategories) })
+        icon: () => h(NIcon, { size: 13 }, { default: () => h(ExpandCategories) })
     },
     {
         label: '连接',
         key: 'connect',
         // disabled: true,
-        icon: () => h(NIcon, null, { default: () => h(Link) })
+        icon: () => h(NIcon, { size: 13 }, { default: () => h(Terminal2) })
     }
 ];
 const buttonGroups = [
     {
         label: t('link'),
-        icon: Link,
+        icon: Terminal2,
         click: (e: Event) => {
             handleRootLink(e);
         }
@@ -159,33 +161,45 @@ const buttonGroups = [
  * @description 处理节点展开
  * @param expandedKeys
  * @param _option
- * @param _meta
+ * @param meta
  */
 const handleExpandCollapse = (
     expandedKeys: string[],
     _option: Array<TreeOption | null>,
-    _meta: { node: TreeOption | null; action: 'expand' | 'collapse' | 'filter' }
+    meta: { node: TreeOption | null; action: 'expand' | 'collapse' | 'filter' }
 ) => {
     expandedKeysRef.value = expandedKeys;
 
     emits('sync-load-node');
 
-    // switch (meta.action) {
-    //     case 'expand':
-    //         meta.node &&
-    //             (meta.node.prefix = () =>
-    //                 h(NIcon, null, {
-    //                     default: () => h(FolderOpen)
-    //                 }));
-    //         break;
-    //     case 'collapse':
-    //         meta.node &&
-    //             (meta.node.prefix = () =>
-    //                 h(NIcon, null, {
-    //                     default: () => h(Folder)
-    //                 }));
-    //         break;
-    // }
+    if (meta.node && meta.node.type === 'pod') {
+        return;
+    }
+
+    switch (meta.action) {
+        case 'expand':
+            meta.node &&
+                (meta.node.prefix = () =>
+                    h(
+                        NIcon,
+                        { size: 14 },
+                        {
+                            default: () => h(FolderOpen)
+                        }
+                    ));
+            break;
+        case 'collapse':
+            meta.node &&
+                (meta.node.prefix = () =>
+                    h(
+                        NIcon,
+                        { size: 14 },
+                        {
+                            default: () => h(Folder)
+                        }
+                    ));
+            break;
+    }
 };
 
 /**
diff --git a/ui/src/components/Kubernetes/helper/index.ts b/ui/src/components/Kubernetes/helper/index.ts
index b3b9d95d..0f8769f5 100644
--- a/ui/src/components/Kubernetes/helper/index.ts
+++ b/ui/src/components/Kubernetes/helper/index.ts
@@ -14,7 +14,7 @@ export const showToolTip = (option: TreeOption) => {
         {
             trigger: 'hover',
             placement: 'top-start',
-            delay: 500
+            delay: 1000
         },
         {
             trigger: () =>
diff --git a/ui/src/hooks/useK8s.ts b/ui/src/hooks/useK8s.ts
index 46e9c762..6c3b31b0 100644
--- a/ui/src/hooks/useK8s.ts
+++ b/ui/src/hooks/useK8s.ts
@@ -1,9 +1,9 @@
 import { NIcon } from 'naive-ui';
 import { v4 as uuid } from 'uuid';
+import { Folder, Docker } from '@vicons/fa';
 import { Cube16Regular } from '@vicons/fluent';
-import { Folder, Cubes, Expand } from '@vicons/fa';
 
-import { ref, h, Component } from 'vue';
+import { ref, h } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useLogger } from './useLogger.ts';
 import { useWebSocket } from '@vueuse/core';
@@ -66,24 +66,16 @@ export const useK8s = () => {
      *
      * @param item
      * @param label
-     * @param _icon
      * @param isLeaf
      * @param id
      */
-    const setCommonAttributes = (
-        item: any,
-        label: string,
-        _icon: Component,
-        isLeaf: boolean = false,
-        id?: string
-    ) => {
+    const setCommonAttributes = (item: any, label: string, isLeaf: boolean = false, id?: string) => {
         Object.assign(item, {
             id: id || uuid(),
             label,
             key: uuid(),
             k8s_id: uuid(),
             isLeaf
-            // prefix: () => h(NIcon, isLeaf ? { size: 16 } : null, { default: () => h(icon) })
         });
     };
 
@@ -138,9 +130,9 @@ export const useK8s = () => {
                 pod: podName,
                 container: container.name,
                 namespace,
-                prefix: () => h(NIcon, {}, { default: () => h(Cube16Regular) })
+                prefix: () => h(NIcon, { size: 13 }, { default: () => h(Docker) })
             });
-            setCommonAttributes(container, container.name, Cube16Regular, true, parentId);
+            setCommonAttributes(container, container.name, true, parentId);
         });
     };
 
@@ -153,12 +145,12 @@ export const useK8s = () => {
      */
     const handlePods = (pods: IPods[], namespace: string, parentId: string) => {
         pods.forEach(pod => {
-            setCommonAttributes(pod, pod.name, Folder, false, parentId);
+            setCommonAttributes(pod, pod.name, false, parentId);
 
             if (pod.containers && pod.containers?.length > 0) {
                 pod.namespace = namespace;
                 pod.children = pod.containers;
-                pod.prefix = () => h(NIcon, {}, { default: () => h(Cubes) });
+                pod.prefix = () => h(NIcon, { size: 13 }, { default: () => h(Cube16Regular) });
                 handleContainer(pod.children, pod.name, namespace, parentId);
                 delete pod.containers;
             } else {
@@ -176,8 +168,8 @@ export const useK8s = () => {
 
         Object.keys(data).map(nodeKey => {
             const node = data[nodeKey];
-            setCommonAttributes(node, nodeKey, Folder, false, messageId);
-            node.prefix = () => h(NIcon, {}, { default: () => h(Expand) });
+            setCommonAttributes(node, nodeKey, false, messageId);
+            node.prefix = () => h(NIcon, { size: 13 }, { default: () => h(Folder) });
 
             if (node.pods && node.pods.length > 0) {
                 node.children = node.pods;
@@ -208,9 +200,13 @@ export const useK8s = () => {
             isLeaf: false,
             isParent: true,
             prefix: () =>
-                h(NIcon, null, {
-                    default: () => h(Folder)
-                })
+                h(
+                    NIcon,
+                    { size: 13 },
+                    {
+                        default: () => h(Folder)
+                    }
+                )
         };
 
         syncLoadNodes(treeRootNode);
@@ -239,9 +235,13 @@ export const useK8s = () => {
             label: name,
             isLeaf: false,
             prefix: () =>
-                h(NIcon, null, {
-                    default: () => h(Folder)
-                })
+                h(
+                    NIcon,
+                    { size: 13 },
+                    {
+                        default: () => h(Folder)
+                    }
+                )
         };
 
         if (!node.namespace && !node.pod) {
@@ -258,7 +258,7 @@ export const useK8s = () => {
             childNode.prefix = () =>
                 h(
                     NIcon,
-                    { size: 16 },
+                    { size: 14 },
                     {
                         default: () => h(Cube16Regular)
                     }
diff --git a/ui/src/index.css b/ui/src/index.css
index b5c61c95..6d295578 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+*{
+    font-family: 'Open Sans', 'Monaco', 'Consolas', 'monospace';
+}
diff --git a/ui/yarn.lock b/ui/yarn.lock
index e50a56b8..37155ca9 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -441,6 +441,11 @@
   resolved "https://registry.yarnpkg.com/@vicons/material/-/material-0.12.0.tgz#068e72fa40bd7f780af5fc68011fb69010c8e0b5"
   integrity sha512-chv1CYAl8P32P3Ycwgd5+vw/OFNc2mtkKdb1Rw4T5IJmKy6GVDsoUKV3N2l208HATn7CCQphZtuPDdsm7K2kmA==
 
+"@vicons/tabler@^0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@vicons/tabler/-/tabler-0.12.0.tgz#11924d2288e9346d47b44dd643ac20e72a32e089"
+  integrity sha512-3+wUFuxb7e8OzZ8Wryct1pzfA2vyoF4lwW98O9s27ZrfCGaJGNmqG+q8A7vQ92Mf+COCgxpK+rhNPTtTvaU6qw==
+
 "@vitejs/plugin-vue@^5.0.5":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz#f11091e0130eca6c1ca8cfb85ee71ea53b255d31"