From 526b2c05792402563bda1ee5360e9d88327a96a2 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@163.com>
Date: Wed, 16 Apr 2025 14:57:51 +0800
Subject: [PATCH] feat: enhance Vite configuration and update metrics display

- Added support for JSX in Vite configuration by including the vueJsx plugin.
- Simplified the metrics display in CurrentMetrics.vue to show only the percentage of used memory and disk.
- Adjusted CSS in CurrentMetrics.vue to prevent wrapping and added a gap between items for better layout.
- Refactored TableCell.vue to remove unused imports, optimizing the component.
- Updated useNodeList.tsx to replace NodeType with ClNodeType and made minor formatting adjustments for consistency.
---
 .../components/core/metric/CurrentMetrics.vue |  7 +++---
 .../src/components/ui/table/TableCell.vue     |  2 +-
 .../src/views/node/list/useNodeList.tsx       | 23 ++++++++-----------
 frontend/crawlab-ui/vite.config.ts            |  4 ++--
 4 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/frontend/crawlab-ui/src/components/core/metric/CurrentMetrics.vue b/frontend/crawlab-ui/src/components/core/metric/CurrentMetrics.vue
index f7937f15..8de7b4cb 100644
--- a/frontend/crawlab-ui/src/components/core/metric/CurrentMetrics.vue
+++ b/frontend/crawlab-ui/src/components/core/metric/CurrentMetrics.vue
@@ -73,7 +73,7 @@ defineOptions({ name: 'ClCurrentMetrics' });
         :clickable="clickable"
         :icon="['fa', 'memory']"
         :type="getTagType(metric?.used_memory_percent)"
-        :label="`${formatBytes(metric?.used_memory)} / ${formatBytes(metric?.total_memory)} (${Math.round(metric?.used_memory_percent || 0)}%)`"
+        :label="`${Math.round(metric?.used_memory_percent || 0)}%`"
         @click="(event: MouseEvent) => emit('click', event)"
       >
         <template #tooltip>
@@ -103,7 +103,7 @@ defineOptions({ name: 'ClCurrentMetrics' });
         :clickable="clickable"
         :icon="['fa', 'hdd']"
         :type="getTagType(metric?.used_disk_percent)"
-        :label="`${formatBytes(metric?.used_disk)} / ${formatBytes(metric?.total_disk)} (${Math.round(metric?.used_disk_percent || 0)}%)`"
+        :label="`${Math.round(metric?.used_disk_percent || 0)}%`"
         @click="(event: MouseEvent) => emit('click', event)"
       >
         <template #tooltip>
@@ -188,6 +188,7 @@ defineOptions({ name: 'ClCurrentMetrics' });
 .current-metrics {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  gap: 5px;
 }
 </style>
diff --git a/frontend/crawlab-ui/src/components/ui/table/TableCell.vue b/frontend/crawlab-ui/src/components/ui/table/TableCell.vue
index 063e7443..9581bd0f 100644
--- a/frontend/crawlab-ui/src/components/ui/table/TableCell.vue
+++ b/frontend/crawlab-ui/src/components/ui/table/TableCell.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { computed, h } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 import { ClButtonGroup, ClFaIconButton } from '@/components';
diff --git a/frontend/crawlab-ui/src/views/node/list/useNodeList.tsx b/frontend/crawlab-ui/src/views/node/list/useNodeList.tsx
index de278fac..16276d9e 100644
--- a/frontend/crawlab-ui/src/views/node/list/useNodeList.tsx
+++ b/frontend/crawlab-ui/src/views/node/list/useNodeList.tsx
@@ -6,12 +6,9 @@ import {
   setupListComponent,
 } from '@/utils/list';
 import useList from '@/layouts/content/list/useList';
-import NodeType from '@/components/core/node/NodeType.vue';
+import { ClNodeType } from '@/components';
 import {
   TABLE_COLUMN_NAME_ACTIONS,
-  TABLE_ACTION_EDIT,
-  TABLE_ACTION_CUSTOMIZE_COLUMNS,
-  TABLE_ACTION_EXPORT,
 } from '@/constants/table';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import useNodeService from '@/services/node/nodeService';
@@ -123,7 +120,7 @@ const useNodeList = () => {
             store,
             ns,
             'name',
-            FILTER_OP_CONTAINS
+            FILTER_OP_CONTAINS,
           ),
         },
         {
@@ -139,7 +136,7 @@ const useNodeList = () => {
             store,
             ns,
             'is_master',
-            FILTER_OP_EQUAL
+            FILTER_OP_EQUAL,
           ),
         },
         {
@@ -161,7 +158,7 @@ const useNodeList = () => {
             store,
             ns,
             'status',
-            FILTER_OP_EQUAL
+            FILTER_OP_EQUAL,
           ),
         },
         {
@@ -177,7 +174,7 @@ const useNodeList = () => {
             store,
             ns,
             'enabled',
-            FILTER_OP_EQUAL
+            FILTER_OP_EQUAL,
           ),
         },
       ],
@@ -208,7 +205,7 @@ const useNodeList = () => {
           icon: ['fa', 'list'],
           width: '150',
           value: (row: Node) => {
-            return <NodeType isMaster={row.is_master} />;
+            return <ClNodeType isMaster={row.is_master} />;
           },
           hasFilter: true,
           allowFilterItems: true,
@@ -275,7 +272,7 @@ const useNodeList = () => {
                 disabled={
                   !isAllowedAction(
                     router.currentRoute.value.path,
-                    ACTION_ENABLE
+                    ACTION_ENABLE,
                   )
                 }
                 onUpdate:modelValue={async (value: boolean) => {
@@ -305,7 +302,7 @@ const useNodeList = () => {
           className: 'current-metric',
           label: t('views.nodes.table.columns.currentMetrics'),
           icon: ['fa', 'chart-line'],
-          width: '200',
+          width: '240',
           value: (row: Node) => {
             if (!row._id) return;
             const currentMetrics = state.nodeMetricsMap[row._id];
@@ -372,7 +369,7 @@ const useNodeList = () => {
                     {
                       type: 'warning',
                       confirmButtonClass: 'el-button--danger',
-                    }
+                    },
                   );
                   if (res) {
                     await deleteById(row._id as string);
@@ -397,7 +394,7 @@ const useNodeList = () => {
         return !['current-metric'].includes(col.key);
       }
       return true;
-    })
+    }),
   );
 
   // options
diff --git a/frontend/crawlab-ui/vite.config.ts b/frontend/crawlab-ui/vite.config.ts
index 8aa0c12d..683a20dd 100644
--- a/frontend/crawlab-ui/vite.config.ts
+++ b/frontend/crawlab-ui/vite.config.ts
@@ -1,6 +1,7 @@
 import { resolve } from 'path';
 import { defineConfig, UserConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 import dynamicImport from 'vite-plugin-dynamic-import';
 import { visualizer } from 'rollup-plugin-visualizer';
 
@@ -26,14 +27,13 @@ export default defineConfig(({ mode }) => {
       include: ['element-plus', 'axios', 'monaco-editor'],
     },
     resolve: {
-      dedupe: ['vue', 'vue-router', 'vuex', 'axios', 'element-plus'],
       alias: {
         '@': resolve(__dirname, 'src'),
       },
       extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
     },
     // @ts-ignore
-    plugins: [vue(), dynamicImport()],
+    plugins: [vue(), vueJsx(), dynamicImport()],
     server: {
       cors: true,
     },