perf: Remove the icon component

Dockerfile

@@ -1,4 +1,4 @@
-FROM jumpserver/koko-base:20240829_082809 AS stage-build
+FROM jumpserver/koko-base:20240829_093831 AS stage-build
 WORKDIR /opt/koko
 ARG TARGETARCH
 COPY . .

ui/components.d.ts

@@ -22,7 +22,6 @@ declare module 'vue' {
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NFlex: typeof import('naive-ui')['NFlex']
-    NFloatButton: typeof import('naive-ui')['NFloatButton']
     NForm: typeof import('naive-ui')['NForm']
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGrid: typeof import('naive-ui')['NGrid']
@@ -31,7 +30,6 @@ declare module 'vue' {
     NImage: typeof import('naive-ui')['NImage']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
-    NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NList: typeof import('naive-ui')['NList']

ui/package.json

@@ -24,7 +24,6 @@
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
     "uuid": "^10.0.0",
-    "vite-plugin-svg-icons": "^2.0.1",
     "vue": "^3.4.31",
     "vue-draggable-plus": "^0.5.2",
     "vue-i18n": "^9.13.1",

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

@@ -292,7 +292,7 @@ const handleClose = (name: string) => {
 const findNodeById = (id: string): void => {
     const searchNode = (nodes: customTreeOption[]) => {
         for (const node of nodes) {
-            if (node.id === id) {
+            if (node.key === id) {
                 treeStore.setCurrentNode(node);
                 return true;
             }

ui/src/components/Kubernetes/Sidebar/components/Setting/index.vue

@@ -1,33 +1,29 @@
 <template>
     <n-popover placement="right" trigger="hover">
         <template #trigger>
-            <svg-icon class="setting-icon" :name="name" :icon-style="iconStyle" @click="handleSetting" />
+            <n-icon
+                :component="Settings"
+                size="30"
+                color="#646A73"
+                class="hover:!text-white transition-all duration-300 cursor-pointer"
+                @click="handleSetting"
+            />
         </template>
         {{ t('Custom Setting') }}
     </n-popover>
 </template>
 
 <script setup lang="ts">
-import { CSSProperties } from 'vue';
 import { useI18n } from 'vue-i18n';
-import SvgIcon from '@/components/SvgIcon/index.vue';
+import { Settings } from '@vicons/carbon';
 
 const { t } = useI18n();
 
 const props = defineProps<{
-    name: string;
-    iconStyle: CSSProperties;
     onClick: () => void;
 }>();
 
 const handleSetting = () => {
     props.onClick();
 };
 </script>
-
-<style scoped lang="scss">
-.setting-icon:hover {
-    //fill: #1ab394 !important;
-    fill: #fff !important;
-}
-</style>

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

@@ -6,7 +6,7 @@
     &.active {
         .tree-icon {
             //fill: #1ab394 !important;
-            fill: #ffffff !important;
+            color: #ffffff !important;
         }
 
         &::before {
@@ -23,7 +23,3 @@
     }
 }
 
-.tree-icon:hover {
-    //fill: #1ab394 !important;
-    fill: #fff !important;
-}

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

@@ -5,20 +5,20 @@
         class="py-[5px] w-full icon-wrapper"
         :class="{ active: isActive }"
     >
-        <svg-icon class="tree-icon" :name="name" :icon-style="iconStyle" />
+        <n-icon
+            :component="TreeIcon"
+            color="#646A73"
+            size="30"
+            class="hover:!text-white transition-all duration-300 cursor-pointer tree-icon"
+        />
     </n-button>
 </template>
 
 <script setup lang="ts">
-import { CSSProperties, ref } from 'vue';
+import { ref } from 'vue';
+import { Tree as TreeIcon } from '@vicons/carbon';
 
 import mittBus from '@/utils/mittBus.ts';
-import SvgIcon from '@/components/SvgIcon/index.vue';
-
-defineProps<{
-    name: string;
-    iconStyle: CSSProperties;
-}>();
 
 const isActive = ref(true);
 

ui/src/components/Kubernetes/Sidebar/sideTop.vue

@@ -1,17 +1,12 @@
 <template>
     <n-flex justify="center" align="center" class="cursor-pointer w-full h-[48px]">
         <template v-for="option of topIconOptions" :key="option.name">
-            <component :is="option.component" :name="option.name" :icon-style="option.iconStyle" />
+            <component :is="option.component" />
         </template>
     </n-flex>
     <n-flex justify="center" align="center" class="mb-[15px] cursor-pointer">
         <template v-for="option of bottomOptions" :key="option.name">
-            <component
-                :is="option.component"
-                :name="option.name"
-                :on-click="option.onClick"
-                :icon-style="option.iconStyle"
-            />
+            <component :is="option.component" :on-click="option.onClick" />
         </template>
     </n-flex>
 </template>
@@ -20,28 +15,16 @@
 import Tree from './components/Tree/index.vue';
 import Setting from './components/Setting/index.vue';
 
-import { CSSProperties } from 'vue';
 import mittBus from '@/utils/mittBus.ts';
 
-const iconStyle: CSSProperties = {
-    fill: '#646A73',
-    width: '30px',
-    height: '30px',
-    transition: 'fill 0.3s'
-};
-
 const topIconOptions = [
     {
-        iconStyle,
-        name: 'tree',
         component: Tree
     }
 ];
 
 const bottomOptions = [
     {
-        iconStyle,
-        name: 'setting',
         component: Setting,
         onClick: () => {
             mittBus.emit('open-setting');

ui/src/main.ts

@@ -11,8 +11,6 @@ import './index.css';
 import 'normalize.css';
 // 引入自定义初始化样式
 import '@/style/reset.scss';
-// 引入图标注册脚本
-import 'virtual:svg-icons-register';
 // 引入 xterm 样式
 import '@xterm/xterm/css/xterm.css';
 

ui/vite.config.ts

@@ -1,5 +1,4 @@
 import { resolve } from 'path';
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 import { manualChunksPlugin } from 'vite-plugin-webpackchunkname';
 import { defineConfig, loadEnv, ConfigEnv, UserConfig } from 'vite';
@@ -19,15 +18,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     const env = loadEnv(mode, root);
 
     return {
-        plugins: [
-            vue(),
-            manualChunksPlugin(),
-            createSvgIconsPlugin({
-                iconDirs: [resolve(process.cwd(), 'src/asset/icons')],
-                symbolId: 'icon-[dir]-[name]'
-            }),
-            Components({ dts: true, resolvers: [NaiveUiResolver()] })
-        ],
+        plugins: [vue(), manualChunksPlugin(), Components({ dts: true, resolvers: [NaiveUiResolver()] })],
         resolve: {
             extensions: ['.js', '.ts', '.vue', '.json'],
             alias: {