fix(frontend): table问题修复 #9155

Author: hLinx

dbm-ui/frontend/package.json

@@ -24,7 +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.33",
+    "@blueking/table": "^0.0.1-beta.34",
     "@icon-cool/bk-icon-bk-biz-components": "^0.0.4",
     "@vueuse/core": "^12.0.0",
     "axios": "^1.7.9",

dbm-ui/frontend/src/components/db-table/index.vue

@@ -209,7 +209,7 @@
     remotePagination: true,
     allowRowClickSelect: false,
     remoteSort: false,
-    showSettings: true,
+    showSettings: false,
   });
 
   const emits = defineEmits<Emits>();

dbm-ui/frontend/src/views/db-manage/common/RenderNodeInstance.vue

@@ -97,7 +97,6 @@
         ref="tableRef"
         :columns="columns"
         :data-source="dataSource"
-        releate-url-query
         style="margin-bottom: 34px" />
       <template #footer>
         <BkButton @click="handleHideMore">

dbm-ui/frontend/src/views/db-manage/common/add-permission-rule-dialog/Index.vue

@@ -37,7 +37,6 @@
         :columns="columns"
         :data-source="getPermissionRules"
         :max-height="700"
-        :settings="settings"
         @clear-search="handleClearSearch" />
     </div>
     <template #footer>
@@ -124,23 +123,6 @@
     },
   ];
 
-  const settings = {
-    fields: [
-      {
-        label: t('账号名称'),
-        field: 'user',
-      },
-      {
-        label: t('访问DB'),
-        field: 'access_db',
-      },
-      {
-        label: t('权限'),
-        field: 'privilege',
-      },
-    ],
-    checked: ['user', 'access_db', 'privilege'],
-  };
 
   const columns = [
     {

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/permission-rules/components/accounter-rules-selector/components/AccountRulesTable.vue

@@ -18,7 +18,6 @@
     :columns="columns"
     :data-source="dataSource"
     :max-height="700"
-    row-hover="auto"
     @clear-search="handleClearSearch" />
 </template>
 
@@ -44,25 +43,25 @@
 
   import DbTable from '@components/db-table/index.vue';
 
-  interface Props {
+  export interface Props<T> {
     accountType: AccountTypes,
     selectedList?: T[]
   }
 
-  interface Emits {
+  export interface Emits<T> {
     (e: 'change', value: UnwrapRef<typeof selectedMap>): void,
     (e: 'delete', value: T[]): void
   }
 
-  interface Expose {
+  export interface Expose {
     searchData: (value?: Record<string, string>) => void
   }
 
-  const props = withDefaults(defineProps<Props>(), {
+  const props = withDefaults(defineProps<Props<T>>(), {
     selectMode: false,
     selectedList: () => [],
   });
-  const emits = defineEmits<Emits>();
+  const emits = defineEmits<Emits<T>>();
 
   const renderList = (row: T) => (
     expandMap.value[row.account.account_id]

dbm-ui/frontend/src/views/db-manage/common/cluster-entry-config/Index.vue

@@ -36,19 +36,41 @@
         <BkTableColumn
           field="entry"
           :label="t('访问入口')"
-          :width="260">
+          :width="300">
           <template #default="{ data }: { data: ClusterEntryInfo }">
+            <template v-if="['master_entry', 'proxy_entry'].includes(data.role)">
+              <BkTag
+                v-if="data.cluster_entry_type === 'polaris'"
+                class="entry-polary-tag"
+                size="small"
+                theme="success">
+                {{ t('北极星') }}
+              </BkTag>
+              <BkTag
+                v-else-if="data.cluster_entry_type === 'clb'"
+                class="entry-clb-tag"
+                size="small"
+                theme="success">
+                CLB
+              </BkTag>
+              <BkTag
+                v-else
+                size="small"
+                theme="info">
+                {{ t('主') }}
+              </BkTag>
+            </template>
             <BkTag
-              v-if="data.role === 'master_entry'"
+              v-if="data.role === 'slave_entry'"
               size="small"
               theme="success">
-              {{ t('主') }}
+              {{ t('从') }}
             </BkTag>
             <BkTag
-              v-else
+              v-if="data.role === 'node_entry'"
               size="small"
-              theme="info">
-              {{ t('从') }}
+              theme="success">
+              Nodes
             </BkTag>
             {{ data.entry }}
           </template>
@@ -57,7 +79,7 @@
           field="ips"
           label="Bind IP"
           :show-overflow="false"
-          :width="240">
+          :width="200">
           <template #default="{ data }: { data: ClusterEntryInfo }">
             <RenderBindIps
               v-if="data.ips"
@@ -71,7 +93,6 @@
     </BkLoading>
   </BkDialog>
 </template>
-
 <script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
@@ -84,7 +105,7 @@
   import RenderBindIps from './RenderBindIps.vue';
 
   export interface ClusterEntryInfo {
-    type: string;
+    cluster_entry_type: string;
     entry: string;
     role: string;
     ips: string;
@@ -125,7 +146,7 @@
     onSuccess: (data) => {
       tableData.value = data
         .map((item) => ({
-          type: item.cluster_entry_type,
+          cluster_entry_type: item.cluster_entry_type,
           entry: item.entry,
           role: item.role,
           ips: item.isDns
@@ -152,16 +173,36 @@
     emits('success');
   };
 </script>
-
-<style lang="less" scoped>
-  .entry-config-table-box {
-    max-height: fit-content;
-  }
-</style>
 <style lang="less">
   .entry-config-dialog {
     .bk-modal-footer {
       display: none;
     }
+
+    .entry-config-table-box {
+      max-height: fit-content;
+    }
+
+    .entry-clb-tag {
+      color: #8e3aff;
+      cursor: pointer;
+      background-color: #f2edff;
+
+      &:hover {
+        color: #8e3aff;
+        background-color: #e3d9fe;
+      }
+    }
+
+    .entry-polary-tag {
+      color: #3a84ff;
+      cursor: pointer;
+      background-color: #edf4ff;
+
+      &:hover {
+        color: #3a84ff;
+        background-color: #e1ecff;
+      }
+    }
   }
 </style>

dbm-ui/frontend/src/views/db-manage/doris/list/components/list/Index.vue

@@ -54,6 +54,7 @@
       selectable
       :settings="tableSetting"
       :show-overflow="false"
+      show-settings
       @clear-search="clearSearchValue"
       @column-filter="columnFilterChange"
       @column-sort="columnSortChange"

dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue

@@ -54,6 +54,7 @@
       selectable
       :settings="tableSetting"
       :show-overflow="false"
+      show-settings
       @clear-search="clearSearchValue"
       @column-filter="columnFilterChange"
       @column-sort="columnSortChange"

dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue

@@ -56,6 +56,7 @@
         selectable
         :settings="tableSetting"
         :show-overflow="false"
+        show-settings
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @column-sort="columnSortChange"

dbm-ui/frontend/src/views/db-manage/influxdb/instance-list/components/render-list/Index.vue

@@ -126,6 +126,7 @@
       :data-source="getInfluxdbInstanceList"
       :row-class="setRowClass"
       :settings="renderSettings"
+      show-settings
       style="margin-bottom: 34px"
       @clear-search="clearSearchValue"
       @column-filter="columnFilterChange"

dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue

@@ -51,6 +51,7 @@
       selectable
       :settings="tableSetting"
       :show-overflow="false"
+      show-settings
       @clear-search="clearSearchValue"
       @column-filter="columnFilterChange"
       @column-sort="columnSortChange"

dbm-ui/frontend/src/views/db-manage/mongodb/instance-list/list/index.vue

@@ -21,24 +21,21 @@
         :validate-values="validateSearchValues"
         @change="handleSearchValueChange" />
     </div>
-    <div
-      class="table-wrapper"
-      :class="{ 'is-shrink-table': isStretchLayoutOpen }">
-      <DbTable
-        ref="tableRef"
-        :columns="columns"
-        :data-source="dataSource"
-        releate-url-query
-        :row-class="setRowClass"
-        selectable
-        :settings="settings"
-        :show-overflow="false"
-        @clear-search="clearSearchValue"
-        @column-filter="columnFilterChange"
-        @column-sort="columnSortChange"
-        @selection="handleSelection"
-        @setting-change="updateTableSettings" />
-    </div>
+    <DbTable
+      ref="tableRef"
+      :columns="columns"
+      :data-source="dataSource"
+      releate-url-query
+      :row-class="setRowClass"
+      selectable
+      :settings="settings"
+      :show-overflow="false"
+      show-settings
+      @clear-search="clearSearchValue"
+      @column-filter="columnFilterChange"
+      @column-sort="columnSortChange"
+      @selection="handleSelection"
+      @setting-change="updateTableSettings" />
   </div>
 </template>
 <script setup lang="tsx">

dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue

@@ -69,6 +69,7 @@
       selectable
       :settings="tableSetting"
       :show-overflow="false"
+      show-settings
       @clear-search="clearSearchValue"
       @column-filter="columnFilterChange"
       @column-sort="columnSortChange"

dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue

@@ -69,6 +69,7 @@
       selectable
       :settings="tableSetting"
       :show-overflow="false"
+      show-settings
       @clear-search="clearSearchValue"
       @column-filter="columnFilterChange"
       @column-sort="columnSortChange"

dbm-ui/frontend/src/views/db-manage/mongodb/structure-instance/Index.vue

@@ -44,6 +44,7 @@
         selectable
         selection-key="target_cluster_id"
         :settings="settings"
+        show-settings
         @clear-search="handleClearFilters"
         @column-filter="handleColumnFilter"
         @selection="handleSelection" />

dbm-ui/frontend/src/views/db-manage/mysql/dumper/components/render-list/components/instance-list/Index.vue

@@ -107,7 +107,7 @@
     </BkAlert>
     <DbTable
       ref="tableRef"
-      class="table-box"
+      class="table-box mb-24"
       :columns="columns"
       :data-source="listDumperInstance"
       primary-key="dumper_id"
@@ -118,7 +118,7 @@
       }"
       selectable
       :settings="settings"
-      style="margin-bottom: 34px"
+      show-settings
       @clear-search="handleClearFilters"
       @column-filter="handleColumnFilter"
       @request-finished="handleTableRequestFinished"

dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue

@@ -63,6 +63,7 @@
         selectable
         :settings="settings"
         :show-overflow="false"
+        show-settings
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @column-sort="columnSortChange"
@@ -579,10 +580,6 @@
       }
     }
 
-    .table-wrapper {
-      background-color: white;
-    }
-
     tr.is-offline {
       .vxe-cell {
         color: @disable-color;

dbm-ui/frontend/src/views/db-manage/mysql/ha-instance-list/components/List.vue

@@ -29,21 +29,18 @@
         :validate-values="validateSearchValues"
         @change="handleSearchValueChange" />
     </div>
-    <div
-      class="table-wrapper"
-      :class="{ 'is-shrink-table': isStretchLayoutOpen }">
-      <DbTable
-        ref="tableRef"
-        :columns="columns"
-        :data-source="getTendbhaInstanceList"
-        releate-url-query
-        :row-class="setRowClass"
-        :settings="settings"
-        @clear-search="clearSearchValue"
-        @column-filter="columnFilterChange"
-        @column-sort="columnSortChange"
-        @setting-change="updateTableSettings" />
-    </div>
+    <DbTable
+      ref="tableRef"
+      :columns="columns"
+      :data-source="getTendbhaInstanceList"
+      releate-url-query
+      :row-class="setRowClass"
+      :settings="settings"
+      show-settings
+      @clear-search="clearSearchValue"
+      @column-filter="columnFilterChange"
+      @column-sort="columnSortChange"
+      @setting-change="updateTableSettings" />
   </div>
 </template>