perf：change icon

jumpserver · Sep 2, 2024 · b17754f · b17754f
1 parent 9edb067
commit b17754f
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 69 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -34,8 +34,10 @@
   "devDependencies": {
     "@types/node": "^20.14.11",
     "@vicons/carbon": "^0.12.0",
+    "@vicons/fa": "^0.12.0",
     "@vicons/fluent": "^0.12.0",
     "@vicons/ionicons5": "^0.12.0",
+    "@vicons/material": "^0.12.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.39",

diff --git a/ui/src/components/Kubernetes/ContentHeader/index.vue b/ui/src/components/Kubernetes/ContentHeader/index.vue
@@ -1,68 +1,68 @@
 <template>
     <n-flex align="center" class="h-[35px] bg-[#3C3C3C]" style="flex-wrap: nowrap">
         <n-flex>
-            <Logo class="ml-[7px]" :logo-image="setting.INTERFACE?.logo_logout" />
-        </n-flex>
-        <n-flex class="w-[calc(100%-35px)]" justify="center" align="center">
-            <n-input
-                autosize
-                bordered
-                clearable
-                size="small"
-                class="h-[25px] rounded-[5px]"
-                style="min-width: 50%"
-                placeholder="Please enter the keyword you want to search"
-                @update:value="handleSearch"
-            >
-                <template #prefix>
-                    <n-icon :component="Search24Regular" />
-                </template>
-            </n-input>
-            <template v-if="currentKeyWord">
-                <n-flex align="center" style="column-gap: 0">
-                    <n-icon
-                        class="w-[25px] h-[25px] flex justify-center items-center cursor-pointer text-white rounded-[5px] hover:bg-[#101014] transition-colors duration-300"
-                        size="16"
-                        :component="ArrowSortUp24Regular"
-                        @click="findPrev"
-                    />
-                    <n-icon
-                        class="w-[25px] h-[25px] flex justify-center items-center cursor-pointer text-white rounded-[5px] hover:bg-[#101014] transition-colors duration-300"
-                        size="16"
-                        :component="ArrowSortDown24Regular"
-                        @click="findNext"
-                    />
-                </n-flex>
-            </template>
+            <Logo class="ml-[10px]" :logo-image="setting.INTERFACE?.logo_logout" />
         </n-flex>
+        <!--        <n-flex class="w-[calc(100%-35px)]" justify="center" align="center">-->
+        <!--            <n-input-->
+        <!--                autosize-->
+        <!--                bordered-->
+        <!--                clearable-->
+        <!--                size="small"-->
+        <!--                class="h-[25px] rounded-[5px]"-->
+        <!--                style="min-width: 50%"-->
+        <!--                placeholder="Please enter the keyword you want to search"-->
+        <!--                @update:value="handleSearch"-->
+        <!--            >-->
+        <!--                <template #prefix>-->
+        <!--                    <n-icon :component="Search24Regular" />-->
+        <!--                </template>-->
+        <!--            </n-input>-->
+        <!--            <template v-if="currentKeyWord">-->
+        <!--                <n-flex align="center" style="column-gap: 0">-->
+        <!--                    <n-icon-->
+        <!--                        class="w-[25px] h-[25px] flex justify-center items-center cursor-pointer text-white rounded-[5px] hover:bg-[#101014] transition-colors duration-300"-->
+        <!--                        size="16"-->
+        <!--                        :component="ArrowSortUp24Regular"-->
+        <!--                        @click="findPrev"-->
+        <!--                    />-->
+        <!--                    <n-icon-->
+        <!--                        class="w-[25px] h-[25px] flex justify-center items-center cursor-pointer text-white rounded-[5px] hover:bg-[#101014] transition-colors duration-300"-->
+        <!--                        size="16"-->
+        <!--                        :component="ArrowSortDown24Regular"-->
+        <!--                        @click="findNext"-->
+        <!--                    />-->
+        <!--                </n-flex>-->
+        <!--            </template>-->
+        <!--        </n-flex>-->
     </n-flex>
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { useParamsStore } from '@/store/modules/params.ts';
 
-import { ArrowSortDown24Regular, ArrowSortUp24Regular, Search24Regular } from '@vicons/fluent';
+// import { ArrowSortDown24Regular, ArrowSortUp24Regular, Search24Regular } from '@vicons/fluent';
 
 import Logo from '@/components/Kubernetes/Sidebar/components/Logo/index.vue';
-import mittBus from '@/utils/mittBus.ts';
-import { ref } from 'vue';
+// import mittBus from '@/utils/mittBus.ts';
+// import { ref } from 'vue';
 
 const paramsStore = useParamsStore();
 const { setting } = storeToRefs(paramsStore);
 
-const currentKeyWord = ref('');
-
-const handleSearch = (value: string) => {
-    currentKeyWord.value = value;
-    mittBus.emit('terminal-search', { keyword: value });
-};
-
-const findNext = () => {
-    mittBus.emit('terminal-search', { keyword: currentKeyWord.value, type: 'next' });
-};
+// const currentKeyWord = ref('');
 
-const findPrev = () => {
-    mittBus.emit('terminal-search', { keyword: currentKeyWord.value, type: 'prev' });
-};
+// const handleSearch = (value: string) => {
+//     currentKeyWord.value = value;
+//     mittBus.emit('terminal-search', { keyword: value });
+// };
+//
+// const findNext = () => {
+//     mittBus.emit('terminal-search', { keyword: currentKeyWord.value, type: 'next' });
+// };
+//
+// const findPrev = () => {
+//     mittBus.emit('terminal-search', { keyword: currentKeyWord.value, type: 'prev' });
+// };
 </script>
diff --git a/ui/src/components/Kubernetes/Sidebar/components/Logo/index.vue b/ui/src/components/Kubernetes/Sidebar/components/Logo/index.vue
@@ -3,7 +3,7 @@
         lazy
         :src="logoImage"
         alt="Logo 图片"
-        class="h-[35px] w-[35px] justify-center object-fill hover: cursor-pointer"
+        class="h-[30px] w-[30px] justify-center object-fill hover: cursor-pointer"
     />
 </template>
 

diff --git a/ui/src/components/Kubernetes/Sidebar/components/Tree/index.scss b/ui/src/components/Kubernetes/Sidebar/components/Tree/index.scss
@@ -17,8 +17,7 @@
             width: 2px;
             height: 100%;
             content: '';
-            //background-color: #1ab394;
-            background-color: #ffffff;
+            background-color: #1ab394;
         }
     }
 }

diff --git a/ui/src/components/Kubernetes/Sidebar/components/Tree/index.vue b/ui/src/components/Kubernetes/Sidebar/components/Tree/index.vue
@@ -8,7 +8,7 @@
         <n-icon
             :component="TreeIcon"
             color="#646A73"
-            size="30"
+            size="26"
             class="hover:!text-white transition-all duration-300 cursor-pointer tree-icon"
         />
     </n-button>

diff --git a/ui/src/components/Kubernetes/Sidebar/sideTop.vue b/ui/src/components/Kubernetes/Sidebar/sideTop.vue
@@ -4,7 +4,7 @@
             <component :is="option.component" />
         </template>
     </n-flex>
-    <n-flex justify="center" align="center" class="mb-[15px] cursor-pointer">
+    <n-flex justify="center" align="center" class="mb-[5px] cursor-pointer w-[48px] h-[48px]">
         <template v-for="option of bottomOptions" :key="option.name">
             <component :is="option.component" :on-click="option.onClick" />
         </template>

diff --git a/ui/src/components/Kubernetes/Tree/index.vue b/ui/src/components/Kubernetes/Tree/index.vue
@@ -8,8 +8,14 @@
             </template>
             <n-descriptions-item class="h-full">
                 <n-collapse arrow-placement="left" :default-expanded-names="['asset-tree']">
-                    <n-scrollbar style="max-height: calc(100vh - 30px)">
-                        <n-collapse-item title="Kubernetes" class="collapse-item" name="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>-->
                             <n-tree
                                 cascade
                                 show-line
@@ -20,7 +26,7 @@
                                 check-strategy="all"
                                 checkbox-placement="left"
                                 :render-label="showToolTip"
-                                :data="treeNodes"
+                                :data="treeNodes[0]?.children"
                                 :node-props="nodeProps"
                                 :on-load="useDebounceFn(handleOnLoad, 300)"
                                 :pattern="searchPattern"
@@ -59,8 +65,9 @@ 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 { Folder, FolderOpenOutline } from '@vicons/ionicons5';
 import { Link, ExpandCategories } from '@vicons/carbon';
 
 const { t } = useI18n();
@@ -107,19 +114,21 @@ const handleExpandCollapse = (
     meta: { node: TreeOption | null; action: 'expand' | 'collapse' | 'filter' }
 ) => {
     expandedKeysRef.value = expandedKeys;
-    if (!meta.node) return;
+
     switch (meta.action) {
         case 'expand':
-            meta.node.prefix = () =>
-                h(NIcon, null, {
-                    default: () => h(FolderOpenOutline)
-                });
+            meta.node &&
+                (meta.node.prefix = () =>
+                    h(NIcon, null, {
+                        default: () => h(FolderOpen)
+                    }));
             break;
         case 'collapse':
-            meta.node.prefix = () =>
-                h(NIcon, null, {
-                    default: () => h(Folder)
-                });
+            meta.node &&
+                (meta.node.prefix = () =>
+                    h(NIcon, null, {
+                        default: () => h(Folder)
+                    }));
             break;
     }
 };
@@ -175,7 +184,8 @@ const handleOnLoad = (node: TreeOption) => {
         if (!expandedKeysRef.value.includes(expendKey)) {
             setTimeout(() => {
                 expandedKeysRef.value.push(expendKey);
-            }, 300);
+                handleExpandCollapse(expandedKeysRef.value, [], { node, action: 'expand' });
+            }, 200);
         }
     }
 

diff --git a/ui/src/hooks/useK8s.ts b/ui/src/hooks/useK8s.ts
@@ -1,6 +1,6 @@
 import { NIcon } from 'naive-ui';
 import { v4 as uuid } from 'uuid';
-import { Folder } from '@vicons/ionicons5';
+import { Folder } from '@vicons/fa';
 import { Kubernetes } from '@vicons/carbon';
 
 import { ref, h } from 'vue';
@@ -80,6 +80,8 @@ export const useK8s = () => {
                 })
         };
 
+        syncLoadNodes(treeRootNode);
+
         treeStore.setTreeNodes(treeRootNode);
         treeStore.setCurrentNode(treeRootNode);
     };

diff --git a/ui/src/hooks/useTerminal.ts b/ui/src/hooks/useTerminal.ts
@@ -273,6 +273,13 @@ export const useTerminal = async (el: HTMLElement, option: ICallbackOptions): Pr
                 terminal?.write(socketData.err);
                 break;
             }
+            case 'K8S_CLOSE': {
+                terminal?.attachCustomKeyEventHandler(() => {
+                    return false;
+                });
+
+                break;
+            }
             default: {
                 break;
             }

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -421,6 +421,11 @@
   resolved "https://registry.yarnpkg.com/@vicons/carbon/-/carbon-0.12.0.tgz#dfcc5d6283662eccee55700b2d5c29e688a70f5a"
   integrity sha512-kCOgr/ZOhZzoiFLJ8pwxMa2TMxrkCUOA22qExPabus35F4+USqzcsxaPoYtqRd9ROOYiHrSqwapak/ywF0D9bg==
 
+"@vicons/fa@^0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@vicons/fa/-/fa-0.12.0.tgz#a5f92db45990f8a47b5eeedcdb9b673f0dababc8"
+  integrity sha512-g2PIeJLsTHUjt6bK63LxqC0uYQB7iu+xViJOxvp1s8b9/akpXVPVWjDTTsP980/0KYyMMe4U7F/aUo7wY+MsXA==
+
 "@vicons/fluent@^0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@vicons/fluent/-/fluent-0.12.0.tgz#7e9a39190114f7cb682a71dd166e7efec35e5e9c"
@@ -431,6 +436,11 @@
   resolved "https://registry.yarnpkg.com/@vicons/ionicons5/-/ionicons5-0.12.0.tgz#c39fda04420dfae3b58053faf8aaf3555253299d"
   integrity sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==
 
+"@vicons/material@^0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@vicons/material/-/material-0.12.0.tgz#068e72fa40bd7f780af5fc68011fb69010c8e0b5"
+  integrity sha512-chv1CYAl8P32P3Ycwgd5+vw/OFNc2mtkKdb1Rw4T5IJmKy6GVDsoUKV3N2l208HATn7CCQphZtuPDdsm7K2kmA==
+
 "@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"