perf(frontend): table 组件交互优化 #7818

TencentBlueKing · Nov 18, 2024 · b503caa · b503caa
1 parent 33ecd66
commit b503caa
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 25 deletions.
diff --git a/dbm-ui/frontend/.vscode/settings.json b/dbm-ui/frontend/.vscode/settings.json
@@ -37,24 +37,25 @@
   "preCI.localCodeCheck.checkerSet.JS": ["standard_js"],
   "peacock.remoteColor": "#45e35f",
   "bk-code-ai.enable": false,
+  "typescript.tsdk": "node_modules/typescript/lib",
   "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#71ea85",
-    "activityBar.background": "#71ea85",
+    "activityBar.activeBackground": "#65c89b",
+    "activityBar.background": "#65c89b",
     "activityBar.foreground": "#15202b",
     "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#8874ea",
-    "activityBarBadge.foreground": "#15202b",
+    "activityBarBadge.background": "#945bc4",
+    "activityBarBadge.foreground": "#e7e7e7",
     "commandCenter.border": "#15202b99",
-    "sash.hoverBorder": "#71ea85",
-    "statusBar.background": "#45e35f",
+    "sash.hoverBorder": "#65c89b",
+    "statusBar.background": "#42b883",
     "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#20d53e",
-    "statusBarItem.remoteBackground": "#45e35f",
+    "statusBarItem.hoverBackground": "#359268",
+    "statusBarItem.remoteBackground": "#42b883",
     "statusBarItem.remoteForeground": "#15202b",
-    "titleBar.activeBackground": "#45e35f",
+    "titleBar.activeBackground": "#42b883",
     "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#45e35f99",
+    "titleBar.inactiveBackground": "#42b88399",
     "titleBar.inactiveForeground": "#15202b99"
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "peacock.color": "#42b883"
 }
diff --git a/dbm-ui/frontend/package.json b/dbm-ui/frontend/package.json
@@ -24,6 +24,7 @@
     "@blueking/login-modal": "^1.0.5",
     "@blueking/notice-component": "2.0.5",
     "@blueking/sub-saas": "0.0.0-beta.6",
+    "@blueking/table": "^0.0.1-beta.10",
     "@blueking/vxe-table": "^4.8.0-beta.7.4",
     "@icon-cool/bk-icon-bk-biz-components": "0.0.4",
     "@vueuse/core": "^11.0.3",

diff --git a/dbm-ui/frontend/src/common/importComps.ts b/dbm-ui/frontend/src/common/importComps.ts
@@ -12,8 +12,8 @@
  */
 
 import type { App } from 'vue';
-import { VxeTooltip } from 'vxe-pc-ui';
 
+// import { VxeTooltip } from 'vxe-pc-ui';
 import AuthButton from '@components/auth-component/button.vue';
 import AuthTemplate from '@components/auth-component/component.vue';
 import AuthOption from '@components/auth-component/option.vue';
@@ -37,10 +37,13 @@ import SkeletonLoading from '@components/skeleton-loading/Index.vue';
 import SmartAction from '@components/smart-action/Index.vue';
 import { ipSelector } from '@components/vue2/ip-selector';
 
+import { Table, TableColumn } from '@blueking/table';
 import UserSelector from '@patch/user-selector/selector.vue';
 
-import Table from './table/BkTable.vue';
-import TableColumn from './table/BkTableColumn.vue';
+// import Table from './table/BkTable.vue';
+// import TableColumn from './table/BkTableColumn.vue';
+
+import('@blueking/table/vue3/vue3.css');
 
 export const setGlobalComps = (app: App<Element>) => {
   app.component('DbCard', DbCard);
@@ -74,6 +77,6 @@ export const setGlobalComps = (app: App<Element>) => {
 
     app.component('BkTable', Table);
     app.component('BkTableColumn', TableColumn);
-    app.component('VxeTooltip', VxeTooltip);
+    // app.component('VxeTooltip', VxeTooltip);
   });
 };
diff --git a/dbm-ui/frontend/src/common/table/BkTable.vue b/dbm-ui/frontend/src/common/table/BkTable.vue
@@ -3,7 +3,6 @@
     <VxeTable
       ref="table"
       v-bind="realProps"
-      :row-config="rowConfig"
       @cell-click="handleCellClick"
       @cell-dblclick="handleCellDbclick"
       @cell-mouseenter="handleCellMouseenter"
@@ -184,6 +183,7 @@
     size: 'small',
     sortConfig: () => ({
       remote: true,
+      trigger: 'cell',
     }),
     stripe: false,
   });
@@ -203,8 +203,6 @@
 
   const tableRef = useTemplateRef('table');
 
-  const rowConfig = reactive({});
-
   const paginationConfig = reactive({
     layout: ['total', 'limit', 'list'],
     location: 'left',

diff --git a/dbm-ui/frontend/src/common/table/adapter.ts b/dbm-ui/frontend/src/common/table/adapter.ts
@@ -77,7 +77,9 @@ export const tableConfig = (bkTableConfig: any) => {
   const bkTableConfigMemo = { ...bkTableConfig };
   const vxeTableConfig = {
     ...bkTableConfig,
-    rowConfig: {},
+    rowConfig: {
+      isHover: true,
+    },
   };
 
   if (bkTableConfigMemo.columns) {
@@ -93,9 +95,9 @@ export const tableConfig = (bkTableConfig: any) => {
     }
   }
 
-  if (bkTableConfigMemo.rowHeight) {
+  if (bkTableConfigMemo['row-height']) {
     Object.assign(vxeTableConfig.rowConfig, {
-      height: bkTableConfigMemo.rowHeight,
+      height: bkTableConfigMemo['row-height'],
     });
   }
 
@@ -118,5 +120,7 @@ export const tableConfig = (bkTableConfig: any) => {
   delete vxeTableConfig.settings;
   delete vxeTableConfig.showSettings;
 
+  console.log('vxeTableConfigvxeTableConfig = ', vxeTableConfig);
+
   return vxeTableConfig;
 };
diff --git a/dbm-ui/frontend/src/components/db-table/index.vue b/dbm-ui/frontend/src/components/db-table/index.vue
@@ -25,9 +25,8 @@
         :data="tableData.results"
         :max-height="tableMaxHeight"
         :pagination="pagination"
-        :pagination-height="60"
         :remote-pagination="remotePagination"
-        show-overflow-tooltip
+        show-overflow
         :show-settings="showSettings"
         v-bind="$attrs"
         @column-sort="handleColumnSortChange"
@@ -97,8 +96,8 @@
     fixedPagination?: boolean,
     clearSelection?: boolean,
     paginationExtra?: {
-    small?: boolean;
-  },
+      small?: boolean;
+    },
     selectable?: boolean,
     disableSelectMethod?: (data: any) => boolean|string,
     // data 数据的主键
@@ -527,14 +526,23 @@
 
   // 切换每页条数
   const handlePageLimitChange = (pageLimit: number) => {
+  console.log('pagination.limit = ', pagination.limit,pageLimit )
+  if (pagination.limit === pageLimit){
+    return
+  }
     pagination.limit = pageLimit;
     pagination.current = 1;
     fetchListData();
   };
 
   // 切换页码
   const handlePageValueChange = (pageValue:number) => {
+    if (pagination.current === pageValue) {
+      return
+    }
     pagination.current = pageValue;
+
+    console.log('pagination.current = ', pagination.current, pageValue, pagination )
     fetchListData();
   };
 

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue
@@ -78,6 +78,7 @@
         ref="tableRef"
         :columns="columns"
         :data-source="getTendbhaList"
+        :line-height="80"
         releate-url-query
         :row-class="setRowClass"
         selectable