From 3d93f44f1d7882c2406626fcfd899a1ff7a8634e Mon Sep 17 00:00:00 2001
From: hLinx <327159425@qq.com>
Date: Tue, 21 Jan 2025 11:52:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20table=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20#9155?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/package.json                  |  2 +-
 .../src/components/db-table/index.vue         |  2 +-
 .../db-manage/common/RenderNodeInstance.vue   |  1 -
 .../add-permission-rule-dialog/Index.vue      | 18 ----
 .../components/AccountRulesTable.vue          | 11 ++-
 .../common/cluster-entry-config/Index.vue     | 73 ++++++++++++----
 .../doris/list/components/list/Index.vue      |  1 +
 .../list/components/list/Index.vue            |  1 +
 .../hdfs/list/components/list/Index.vue       |  1 +
 .../components/render-list/Index.vue          |  1 +
 .../kafka/list/components/list/Index.vue      |  1 +
 .../mongodb/instance-list/list/index.vue      | 33 ++++----
 .../components/list/Index.vue                 |  1 +
 .../components/list/Index.vue                 |  1 +
 .../mongodb/structure-instance/Index.vue      |  1 +
 .../components/instance-list/Index.vue        |  4 +-
 .../mysql/ha-cluster-list/components/List.vue |  5 +-
 .../ha-instance-list/components/List.vue      | 27 +++---
 .../components/PrivRuleDetail.vue             |  7 +-
 .../mysql/partition-manage/Index.vue          |  1 +
 .../single-cluster-list/components/List.vue   |  1 +
 .../pulsar/list/components/list/Index.vue     |  1 +
 .../cluster-ha-list/components/list/Index.vue |  1 +
 .../cluster-list/components/list/Index.vue    |  1 +
 .../components/list/Index.vue                 |  1 +
 .../instance-list/components/list/Index.vue   |  3 +-
 .../components/detail/components/NodeList.vue |  4 +-
 .../riak/list/components/list/Index.vue       |  3 +-
 .../ha-cluster-list/components/List.vue       |  1 +
 .../ha-instance-list/components/List.vue      |  1 +
 .../single-cluster-list/components/List.vue   |  1 +
 .../cluster-list/components/list/Index.vue    |  1 +
 .../instance-list/components/list/Index.vue   | 30 +++----
 .../components/PrivRuleDetail.vue             |  3 +-
 .../components/PermissionRule.vue             |  3 +-
 .../tendb-cluster/partition-manage/Index.vue  |  3 +-
 .../index/components/content/Index.vue        | 45 +---------
 .../components/content/Index.vue              |  1 +
 .../components/content/Index.vue              | 31 -------
 .../resource-manage/pool/host-list/Index.vue  | 18 ++--
 .../pool/host-list/components/RenderTable.vue |  2 +
 .../pool/summary-view/components/List.vue     | 22 +++--
 .../common/hooks/use-fetch-data.ts            |  2 +-
 .../common/hooks/use-search-select.ts         |  1 +
 .../common/ticket-detail/Index.vue            | 24 +-----
 .../ticket-detail/components/BaseInfo.vue     | 83 ++++++++++++++++---
 .../components/flow-info/Index.vue            | 46 +++++-----
 .../components/render-sqlfile/Index.vue       | 11 +--
 .../com-factory/components/SpecInfos.vue      |  1 -
 .../com-factory/tendbCluster/Apply.vue        |  2 +-
 50 files changed, 265 insertions(+), 274 deletions(-)

diff --git a/dbm-ui/frontend/package.json b/dbm-ui/frontend/package.json
index c702932584..450dfefbd3 100644
--- a/dbm-ui/frontend/package.json
+++ b/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",
diff --git a/dbm-ui/frontend/src/components/db-table/index.vue b/dbm-ui/frontend/src/components/db-table/index.vue
index 8385c6f463..178915163b 100644
--- a/dbm-ui/frontend/src/components/db-table/index.vue
+++ b/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>();
diff --git a/dbm-ui/frontend/src/views/db-manage/common/RenderNodeInstance.vue b/dbm-ui/frontend/src/views/db-manage/common/RenderNodeInstance.vue
index 04aec58734..7f94f7ef0c 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/RenderNodeInstance.vue
+++ b/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">
diff --git a/dbm-ui/frontend/src/views/db-manage/common/add-permission-rule-dialog/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/add-permission-rule-dialog/Index.vue
index 75b32ab1f7..d25ae0aad2 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/add-permission-rule-dialog/Index.vue
+++ b/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 = [
     {
diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/permission-rules/components/accounter-rules-selector/components/AccountRulesTable.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/permission-rules/components/accounter-rules-selector/components/AccountRulesTable.vue
index 2e50401557..e6735f8c14 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/permission-rules/components/accounter-rules-selector/components/AccountRulesTable.vue
+++ b/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]
diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-entry-config/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-entry-config/Index.vue
index 29e209feab..f941713a17 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/cluster-entry-config/Index.vue
+++ b/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>
diff --git a/dbm-ui/frontend/src/views/db-manage/doris/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/doris/list/components/list/Index.vue
index fe36307e8d..bbf8685bef 100644
--- a/dbm-ui/frontend/src/views/db-manage/doris/list/components/list/Index.vue
+++ b/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"
diff --git a/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
index 4525b7544d..848ec7572a 100644
--- a/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
+++ b/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"
diff --git a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
index 9cf24b525b..03b740572b 100644
--- a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
+++ b/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"
diff --git a/dbm-ui/frontend/src/views/db-manage/influxdb/instance-list/components/render-list/Index.vue b/dbm-ui/frontend/src/views/db-manage/influxdb/instance-list/components/render-list/Index.vue
index b6c5c32a95..d6277f4a9b 100644
--- a/dbm-ui/frontend/src/views/db-manage/influxdb/instance-list/components/render-list/Index.vue
+++ b/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"
diff --git a/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue
index 389d9b8464..3bfc9d3b05 100644
--- a/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue
+++ b/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"
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/instance-list/list/index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/instance-list/list/index.vue
index a2756d0ebc..676ddcb156 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/instance-list/list/index.vue
+++ b/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">
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue
index 957a121901..0adfac3afc 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue
+++ b/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"
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue
index 695c5d3b05..d9350cd815 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue
+++ b/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"
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/structure-instance/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/structure-instance/Index.vue
index 59527ed913..487f4057d8 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/structure-instance/Index.vue
+++ b/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" />
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/dumper/components/render-list/components/instance-list/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/dumper/components/render-list/components/instance-list/Index.vue
index d014d5e40c..3abd0ac525 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/dumper/components/render-list/components/instance-list/Index.vue
+++ b/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"
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
index 854b3306c0..c1f6ec79fc 100644
--- 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
@@ -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;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/ha-instance-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/ha-instance-list/components/List.vue
index 72c5dede1a..5c6b377bd6 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/ha-instance-list/components/List.vue
+++ b/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>
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/template-detail/components/PrivRuleDetail.vue b/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/template-detail/components/PrivRuleDetail.vue
index 7445f941a7..8e826c8f7c 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/template-detail/components/PrivRuleDetail.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/template-detail/components/PrivRuleDetail.vue
@@ -9,7 +9,7 @@
       :columns="columns"
       :container-height="600"
       :data-source="getPermissionRules"
-      settings />
+      :show-overflow="false" />
   </div>
 </template>
 <script setup lang="tsx">
@@ -36,7 +36,6 @@
       label: t('账号名称'),
       field: 'user',
       width: 220,
-      showOverflowTooltip: false,
       render: ({ data }: { data: MysqlPermissionAccountModel }) => (
         <div class="account-box">
           <db-icon
@@ -61,8 +60,6 @@
       label: t('访问DB'),
       width: 300,
       field: 'access-db',
-      showOverflowTooltip: true,
-      sort: true,
       render: ({ data }: { data: MysqlPermissionAccountModel }) => {
         if (data.rules.length < 1) {
           return '--';
@@ -82,8 +79,6 @@
     {
       label: t('权限'),
       field: 'privilege',
-      showOverflowTooltip: true,
-      sort: true,
       render: ({ data }: { data: MysqlPermissionAccountModel }) => {
         if (data.rules.length === 0) {
           return <div class="inner-row">--</div>;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue
index 238a1c6d6c..c342551927 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue
@@ -34,6 +34,7 @@
       :row-class="getRowClass"
       selectable
       :settings="tableSetting"
+      show-settings
       @clear-search="handleClearSearch"
       @selection="handleTableSelection"
       @setting-change="handleSettingChange" />
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
index 486aa83da3..7fa2318e5a 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
@@ -65,6 +65,7 @@
         selectable
         :settings="settings"
         :show-overflow="false"
+        show-settings
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @column-sort="columnSortChange"
diff --git a/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue
index a1e3c502b4..1b7f2457ee 100644
--- a/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/pulsar/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"
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-ha-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-ha-list/components/list/Index.vue
index ba966e1a7e..bc44615d65 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-ha-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-ha-list/components/list/Index.vue
@@ -59,6 +59,7 @@
       selectable
       :settings="settings"
       :show-overflow="false"
+      show-settings
       @clear-search="clearSearchValue"
       @column-filter="columnFilterChange"
       @column-sort="columnSortChange"
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-list/components/list/Index.vue
index d8504e5a73..d00ec99d05 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-list/components/list/Index.vue
@@ -62,6 +62,7 @@
         selectable
         :settings="settings"
         :show-overflow="false"
+        show-settings
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @column-sort="columnSortChange"
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/instance-ha-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/instance-ha-list/components/list/Index.vue
index d0223bae9f..a2a1b5a509 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/instance-ha-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/instance-ha-list/components/list/Index.vue
@@ -38,6 +38,7 @@
         releate-url-query
         :row-class="setRowClass"
         :settings="settings"
+        show-settings
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @column-sort="columnSortChange"
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/instance-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/instance-list/components/list/Index.vue
index a87dd9fb40..348b1a0e35 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/instance-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/instance-list/components/list/Index.vue
@@ -38,6 +38,7 @@
         releate-url-query
         :row-class="setRowClass"
         :settings="settings"
+        show-settings
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @column-sort="columnSortChange"
@@ -306,7 +307,7 @@
       {
         label: t('操作'),
         fixed: 'right',
-        width: 140,
+        width: 100,
         render: ({ data }: { data: RedisInstanceModel }) => (
           <auth-button
             action-id="redis_view"
diff --git a/dbm-ui/frontend/src/views/db-manage/riak/list/components/detail/components/NodeList.vue b/dbm-ui/frontend/src/views/db-manage/riak/list/components/detail/components/NodeList.vue
index 90bba53535..efc8f6aaf3 100644
--- a/dbm-ui/frontend/src/views/db-manage/riak/list/components/detail/components/NodeList.vue
+++ b/dbm-ui/frontend/src/views/db-manage/riak/list/components/detail/components/NodeList.vue
@@ -334,8 +334,8 @@
     },
   );
 
-  const handleSelection = (key: number[], list: Record<any, any>[]) => {
-    selected.value = list as RiakNodeModel[];
+  const handleSelection = (_key: any[], list: RiakNodeModel[]) => {
+    selected.value = list;
   };
 
   const handleAddNode = () => {
diff --git a/dbm-ui/frontend/src/views/db-manage/riak/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/riak/list/components/list/Index.vue
index fad34fc4ec..adf520a048 100644
--- a/dbm-ui/frontend/src/views/db-manage/riak/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/riak/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"
@@ -88,7 +89,7 @@
       <BkTableColumn
         :fixed="isStretchLayoutOpen ? false : 'right'"
         :label="t('操作')"
-        :min-width="240"
+        :min-width="200"
         :show-overflow="false">
         <template #default="{data}: {data: RiakModel}">
           <OperationBtnStatusTips
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
index f48d74077c..b74581d515 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
@@ -53,6 +53,7 @@
       selectable
       :settings="settings"
       :show-overflow="false"
+      show-settings
       @clear-search="clearSearchValue"
       @column-filter="columnFilterChange"
       @column-sort="columnSortChange"
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-instance-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-instance-list/components/List.vue
index a9193b33c6..f7d6746444 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-instance-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-instance-list/components/List.vue
@@ -45,6 +45,7 @@
         :row-class="setRowClass"
         selectable
         :settings="settings"
+        show-settings
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @column-sort="columnSortChange"
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster-list/components/List.vue
index cda303781d..01ad8a4d7c 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster-list/components/List.vue
@@ -54,6 +54,7 @@
         selectable
         :settings="settings"
         :show-overflow="false"
+        show-settings
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @column-sort="columnSortChange"
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/cluster-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/cluster-list/components/list/Index.vue
index 876a9fb38d..47343389e4 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/cluster-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/cluster-list/components/list/Index.vue
@@ -76,6 +76,7 @@
         selectable
         :settings="settings"
         :show-overflow="false"
+        show-settings
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @column-sort="columnSortChange"
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/instance-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/instance-list/components/list/Index.vue
index 2d2779026d..a376484eb6 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/instance-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/instance-list/components/list/Index.vue
@@ -44,6 +44,7 @@
         :row-class="setRowClass"
         selectable
         :settings="settings"
+        show-settings
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @column-sort="columnSortChange"
@@ -414,27 +415,18 @@
       }
     }
 
-    .table-wrapper {
-      background-color: white;
-
-      .db-table,
-      .bk-nested-loading {
-        height: 100%;
-      }
-
-      tr:hover {
-        .db-icon-copy {
-          display: inline-block !important;
-        }
+    tr:hover {
+      .db-icon-copy {
+        display: inline-block !important;
       }
+    }
 
-      .vxe-cell {
-        .db-icon-copy {
-          display: none;
-          margin-left: 4px;
-          color: @primary-color;
-          cursor: pointer;
-        }
+    .vxe-cell {
+      .db-icon-copy {
+        display: none;
+        margin-left: 4px;
+        color: @primary-color;
+        cursor: pointer;
       }
     }
   }
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-create/components/template-detail/components/PrivRuleDetail.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-create/components/template-detail/components/PrivRuleDetail.vue
index eaf02ed968..8f9387ee91 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-create/components/template-detail/components/PrivRuleDetail.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-create/components/template-detail/components/PrivRuleDetail.vue
@@ -8,8 +8,7 @@
       :cell-class="cellClassCallback"
       :columns="columns"
       :container-height="600"
-      :data-source="getPermissionRules"
-      settings />
+      :data-source="getPermissionRules" />
   </div>
 </template>
 <script setup lang="tsx">
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-template-create/components/config-rule/components/RenderData/RenderPrivData/components/PermissionRule.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-template-create/components/config-rule/components/RenderData/RenderPrivData/components/PermissionRule.vue
index 730428421b..ce8a09756b 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-template-create/components/config-rule/components/RenderData/RenderPrivData/components/PermissionRule.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-template-create/components/config-rule/components/RenderData/RenderPrivData/components/PermissionRule.vue
@@ -12,8 +12,7 @@
         :cell-class="cellClassCallback"
         :columns="columns"
         :container-height="600"
-        :data-source="getPermissionRules"
-        settings />
+        :data-source="getPermissionRules" />
     </div>
     <template #footer>
       <div style="display: flex">
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue
index 3308ebeb86..6ff5c71e3d 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue
@@ -34,6 +34,7 @@
       :row-class="getRowClass"
       selectable
       :settings="tableSetting"
+      show-settings
       @clear-search="handleClearSearch"
       @selection="handleTableSelection"
       @setting-change="handleSettingChange" />
@@ -230,7 +231,7 @@
     },
     {
       label: t('操作'),
-      width: 220,
+      width: 180,
       fixed: 'right',
       render: ({ data }: { data: PartitionModel }) => {
         const renderAction = () => {
diff --git a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/content/Index.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/content/Index.vue
index 8fd204aff5..e93a71f4d5 100644
--- a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/content/Index.vue
+++ b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/content/Index.vue
@@ -32,7 +32,6 @@
           :columns="columns"
           :data-source="dataSource"
           :row-class="updateRowClass"
-          :settings="settings"
           :show-overflow="false" />
       </BkLoading>
     </div>
@@ -162,14 +161,14 @@
     },
     {
       label: () => (
-        <div
+        <span
           v-bk-tooltips={{
             content: t('范围 1～100，数字越高代表优先级越高，当有规则冲突时，优先执行数字较高的规则'),
             theme: 'dark',
           }}
           style="border-bottom: 1px dashed #979BA5;">
           {t('优先级')}
-        </div>
+        </span>
       ),
       field: 'priority',
       sort: true,
@@ -334,7 +333,7 @@
       fixed: 'right',
       showOverflow: false,
       field: '',
-      width: 120,
+      width: 140,
       render: ({ data }: {data: DutyRuleModel}) => (
       <div class="operate-box">
         <auth-button
@@ -370,43 +369,6 @@
     },
   ]);
 
-  const settings = {
-    fields: [
-      {
-        label: t('规则名称'),
-        field: 'name',
-      },
-      {
-        label: t('状态'),
-        field: 'status',
-      },
-      {
-        label: t('优先级'),
-        field: 'priority',
-      },
-      {
-        label: t('轮值表'),
-        field: 'duty_arranges',
-      },
-      {
-        label: t('生效时间'),
-        field: 'effective_time',
-      },
-      {
-        label: t('更新时间'),
-        field: 'update_at',
-      },
-      {
-        label: t('更新人'),
-        field: 'updater',
-      },
-      {
-        label: t('启停'),
-        field: 'is_enabled',
-      },
-    ],
-    checked: ['name', 'status', 'priority', 'duty_arranges', 'effective_time', 'updater', 'is_enabled'],
-  };
 
   const { run: runGetPriorityDistinct } = useRequest(getPriorityDistinct, {
     onSuccess: (list) => {
@@ -569,6 +531,7 @@
       }
 
       .display-text {
+        display: inline-block;
         height: 22px;
         padding: 0 8px;
         overflow: hidden;
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-db/monitor-strategy/components/content/Index.vue b/dbm-ui/frontend/src/views/monitor-alarm-db/monitor-strategy/components/content/Index.vue
index 3a1d0f8a38..08143da0b6 100644
--- a/dbm-ui/frontend/src/views/monitor-alarm-db/monitor-strategy/components/content/Index.vue
+++ b/dbm-ui/frontend/src/views/monitor-alarm-db/monitor-strategy/components/content/Index.vue
@@ -29,6 +29,7 @@
         :data-source="dataSource"
         :row-class="updateRowClass"
         :show-overflow="false"
+        :show-settings="false"
         @clear-search="handleClearSearch" />
     </div>
     <EditStrategy
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-plat/global-strategy/components/content/Index.vue b/dbm-ui/frontend/src/views/monitor-alarm-plat/global-strategy/components/content/Index.vue
index 4943aff12e..140d9ad9b5 100644
--- a/dbm-ui/frontend/src/views/monitor-alarm-plat/global-strategy/components/content/Index.vue
+++ b/dbm-ui/frontend/src/views/monitor-alarm-plat/global-strategy/components/content/Index.vue
@@ -29,7 +29,6 @@
           :columns="columns"
           :data-source="dataSource"
           :row-class="updateRowClass"
-          :settings="settings"
           @clear-search="handleClearSearch" />
       </BkLoading>
     </div>
@@ -217,36 +216,6 @@
     },
   ];
 
-  const settings = {
-    fields: [
-      {
-        label: t('策略名称'),
-        field: 'name',
-      },
-      {
-        label: t('监控目标'),
-        field: 'targets',
-      },
-      {
-        label: t('默认通知对象'),
-        field: 'notify_groups',
-      },
-      {
-        label: t('更新时间'),
-        field: 'update_at',
-      },
-      {
-        label: t('更新人'),
-        field: 'updater',
-      },
-      {
-        label: t('启停'),
-        field: 'is_enabled',
-      },
-    ],
-    checked: ['name', 'targets', 'notify_groups', 'update_at', 'updater', 'is_enabled'],
-  };
-
   const { run: runEnablePolicy } = useRequest(enablePolicy, {
     manual: true,
     onSuccess: (isEnabled) => {
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/Index.vue
index 6c7ec84780..458e012b3e 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/Index.vue
@@ -73,6 +73,7 @@
       releate-url-query
       selectable
       :settings="tableSetting"
+      show-settings
       @clear-search="handleClearSearch"
       @selection="handleSelection"
       @setting-change="handleSettingChange" />
@@ -133,64 +134,71 @@
       label: 'IP',
       field: 'ip',
       fixed: 'left',
-      minWidth: 120,
+      minWidth: 150,
       with: 150,
     },
     {
       label: t('管控区域'),
       field: 'bk_cloud_name',
-      with: 120,
+      minWidth: 120,
     },
     {
       label: t('Agent 状态'),
       field: 'agent_status',
-      with: 100,
+      minWidth: 100,
       render: ({ data }: {data: DbResourceModel}) => <HostAgentStatus data={data.agent_status} />,
     },
     {
       label: t('所属业务'),
       field: 'forBizDisplay',
-      width: 170,
+      minWidth: 170,
       render: ({ data }: {data: DbResourceModel}) => data.forBizDisplay || '--',
     },
     {
       label: t('所属DB类型'),
       field: 'resourceTypeDisplay',
-      width: 150,
+      minWidth: 150,
       render: ({ data }: {data: DbResourceModel}) => data.resourceTypeDisplay || '--',
     },
     {
       label: t('机架'),
       field: 'rack_id',
+      minWidth: 100,
       render: ({ data }: {data: DbResourceModel}) => data.rack_id || '--',
     },
     {
       label: t('机型'),
       field: 'device_class',
+      minWidth: 100,
       render: ({ data }: {data: DbResourceModel}) => data.device_class || '--',
     },
     {
       label: t('操作系统类型'),
       field: 'os_type',
+      minWidth: 100,
       render: ({ data }: {data: DbResourceModel}) => data.os_type || '--',
     },
     {
       label: t('地域'),
       field: 'city',
+      minWidth: 100,
       render: ({ data }: {data: DbResourceModel}) => data.city || '--',
     },
     {
       label: t('园区'),
       field: 'sub_zone',
+      minWidth: 100,
       render: ({ data }: {data: DbResourceModel}) => data.sub_zone || '--',
     },
     {
       label: t('CPU(核)'),
       field: 'bk_cpu',
+      minWidth: 100,
     },
     {
       label: t('内存'),
       field: 'bkMemText',
+      minWidth: 100,
       render: ({ data }: {data: DbResourceModel}) => data.bkMemText || '0 M',
     },
     {
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/RenderTable.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/RenderTable.vue
index 21b3e1ce25..60077753a2 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/RenderTable.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/RenderTable.vue
@@ -74,6 +74,7 @@
     limitList: Array<number>;
     align: string;
     layout: Array<string>;
+    remote: boolean;
   }
   export interface IPaginationExtra {
     small?: boolean;
@@ -228,6 +229,7 @@
     limitList: [10, 20, 50, 100],
     align: 'right',
     layout: ['total', 'limit', 'list'],
+    remote: true,
     ...props.paginationExtra,
   });
   // 是否本页全选
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/List.vue b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/List.vue
index 9a0c95864d..db8b2abe15 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/List.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/List.vue
@@ -186,9 +186,9 @@
   };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
   .summary-view-list {
-    :deep(.db-card__content) {
+    .db-card__content {
       padding: 14px 22px;
     }
 
@@ -198,16 +198,14 @@
     }
 
     .summary-view-table {
-      :deep(.cell) {
-        .cell-num {
-          font-weight: bold;
-          color: #3a84ff;
-          cursor: pointer;
-        }
-
-        .cell-num--zero {
-          color: #000;
-        }
+      .cell-num {
+        font-weight: bold;
+        color: #3a84ff;
+        cursor: pointer;
+      }
+
+      .cell-num--zero {
+        color: #000;
       }
     }
   }
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-fetch-data.ts b/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-fetch-data.ts
index 7a7ba5e95f..7458f07dde 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-fetch-data.ts
+++ b/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-fetch-data.ts
@@ -57,7 +57,7 @@ const create = (dataSource: typeof getTickets, options?: { onSuccess?: (data: Ti
 
   const { start: loopFetchTicketStatus } = useTimeoutFn(() => {
     fetchTicketStatus();
-  }, 10000);
+  }, 3000);
 
   const fetchTicketList = (params: ServiceParameters<typeof getTickets>) => {
     isLoading.value = true;
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-search-select.ts b/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-search-select.ts
index fa4408750b..dfd0633868 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-search-select.ts
+++ b/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-search-select.ts
@@ -24,6 +24,7 @@ const create = (options = {} as { exclude: string[] }) => {
       {
         name: t('单号'),
         id: 'ids',
+        multiple: true,
       },
       {
         name: t('单据类型'),
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/Index.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/Index.vue
index 8b4bafe669..e9d6090929 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/Index.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/Index.vue
@@ -58,15 +58,11 @@
   import TicketModel from '@services/model/ticket/ticket';
   import { getTicketDetails } from '@services/source/ticket';
 
-  import { useEventBus } from '@hooks';
-
   import PermissionCatch from '@components/apply-permission/Catch.vue';
 
   import TicketClone from '@views/ticket-center/common/TicketClone.vue';
   import TicketRevoke from '@views/ticket-center/common/TicketRevoke.vue';
 
-  import { useTimeoutFn } from '@vueuse/core';
-
   import BaseInfo from './components/BaseInfo.vue';
   import FlowInfos from './components/flow-info/Index.vue';
   import TaskInfo from './components/task-info/Index.vue';
@@ -79,7 +75,7 @@
 
   const router = useRouter();
   const route = useRoute();
-  const eventBus = useEventBus();
+
   const { t } = useI18n();
 
   const getOffsetTarget = () => document.body.querySelector('.ticket-details-page .db-card');
@@ -101,22 +97,10 @@
           return;
         }
         ticketData.value = data;
-        // 单据为完成继续下一次轮询
-        if (!data.isFinished) {
-          loopFetchTicketDetails();
-        }
       },
     },
   );
 
-  const refreshTicketData = () => {
-    fetchTicketDetails({
-      id: props.ticketId,
-    });
-  };
-
-  const { start: loopFetchTicketDetails } = useTimeoutFn(refreshTicketData, 3000);
-
   watch(
     () => props.ticketId,
     () => {
@@ -144,12 +128,6 @@
     });
     window.open(href);
   };
-
-  eventBus.on('refreshTicketStatus', refreshTicketData);
-
-  onBeforeUnmount(() => {
-    eventBus.off('refreshTicketStatus', refreshTicketData);
-  });
 </script>
 
 <style lang="less">
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/BaseInfo.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/BaseInfo.vue
index e17658d6c7..71a4414b92 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/BaseInfo.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/BaseInfo.vue
@@ -3,38 +3,40 @@
     v-model:collapse="isBaseinfoCardCollapse"
     mode="collapse"
     :title="t('基本信息')">
-    <table class="ticket-base-info">
+    <table
+      v-if="localTicketData"
+      class="ticket-base-info">
       <tbody>
         <tr>
           <td>{{ t('单号') }}:</td>
-          <td>{{ ticketData.id }}</td>
+          <td>{{ localTicketData.id }}</td>
           <td>{{ t('单据状态') }}:</td>
           <td>
             <TicketStatusTag
-              :data="ticketData"
+              :data="localTicketData"
               small />
           </td>
           <td>{{ t('业务') }}:</td>
           <td>
-            {{ ticketData.bk_biz_name }}
+            {{ localTicketData.bk_biz_name }}
           </td>
         </tr>
         <tr>
           <td>{{ t('已耗时') }}:</td>
           <td>
             <CostTimer
-              :is-timing="ticketData?.status === 'RUNNING'"
-              :start-time="utcTimeToSeconds(ticketData?.create_at)"
-              :value="ticketData?.cost_time || 0" />
+              :is-timing="localTicketData?.status === 'RUNNING'"
+              :start-time="utcTimeToSeconds(localTicketData?.create_at)"
+              :value="localTicketData?.cost_time || 0" />
           </td>
           <td>{{ t('单据类型') }}:</td>
-          <td>{{ ticketData.ticket_type_display }}</td>
+          <td>{{ localTicketData.ticket_type_display }}</td>
           <td>{{ t('申请人') }}:</td>
-          <td>{{ ticketData.creator }}</td>
+          <td>{{ localTicketData.creator }}</td>
         </tr>
         <tr>
           <td>{{ t('申请时间') }}:</td>
-          <td>{{ utcDisplayTime(ticketData.create_at) }}</td>
+          <td>{{ utcDisplayTime(localTicketData.create_at) }}</td>
         </tr>
       </tbody>
     </table>
@@ -42,25 +44,57 @@
 </template>
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
   import { useRoute } from 'vue-router';
 
   import TicketModel from '@services/model/ticket/ticket';
+  import { getTicketStatus } from '@services/source/ticket';
+
+  import { useEventBus } from '@hooks';
 
   import CostTimer from '@components/cost-timer/CostTimer.vue';
   import TicketStatusTag from '@components/ticket-status-tag/Index.vue';
 
   import { utcDisplayTime, utcTimeToSeconds } from '@utils';
 
+  import { useTimeoutFn } from '@vueuse/core';
+
   interface Props {
     ticketData: TicketModel;
   }
 
-  defineProps<Props>();
+  const props = defineProps<Props>();
 
   const { t } = useI18n();
   const route = useRoute();
+  const eventBus = useEventBus();
 
   const isBaseinfoCardCollapse = ref(false);
+  const localTicketData = ref<TicketModel>();
+
+  const { refresh: refreshTicketStatus } = useRequest(
+    () => {
+      if (!props.ticketData) {
+        return Promise.reject();
+      }
+      return getTicketStatus({
+        ticket_ids: `${props.ticketData.id}`,
+      });
+    },
+    {
+      manual: true,
+      onSuccess(data) {
+        if (localTicketData.value) {
+          Object.assign(localTicketData.value, {
+            status: data[localTicketData.value.id] as string,
+          });
+          if (!localTicketData.value.isFinished) {
+            loopFetchTicketStatus();
+          }
+        }
+      },
+    },
+  );
 
   watch(
     route,
@@ -71,6 +105,33 @@
       immediate: true,
     },
   );
+
+  watch(
+    () => props.ticketData,
+    () => {
+      if (props.ticketData) {
+        localTicketData.value = new TicketModel(props.ticketData);
+        refreshTicketStatus();
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const refreshTicketData = () => {
+    refreshTicketStatus();
+  };
+
+  const { start: loopFetchTicketStatus } = useTimeoutFn(() => {
+    refreshTicketStatus();
+  }, 3000);
+
+  eventBus.on('refreshTicketStatus', refreshTicketData);
+
+  onBeforeUnmount(() => {
+    eventBus.off('refreshTicketStatus', refreshTicketData);
+  });
 </script>
 <style lang="less">
   .ticket-base-info {
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/flow-info/Index.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/flow-info/Index.vue
index 333656c025..6728315a8b 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/flow-info/Index.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/flow-info/Index.vue
@@ -39,11 +39,12 @@
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
-  import { useRoute } from 'vue-router';
 
   import TicketModel from '@services/model/ticket/ticket';
   import { getTicketFlows } from '@services/source/ticketFlow';
 
+  import { useTimeoutFn } from '@vueuse/core';
+
   import FlowTypeBase from './components/FlowTypeBase.vue';
   import DbTimeLine from './components/time-line/Index.vue';
 
@@ -58,7 +59,6 @@
   });
 
   const { t } = useI18n();
-  const route = useRoute();
 
   const flowTypeModule = Object.values(
     import.meta.glob<{
@@ -80,39 +80,37 @@
   const isLoading = ref(true);
   const flowList = shallowRef<ServiceReturnType<typeof getTicketFlows>>([]);
 
-  const { runAsync: fetchTicketFlows } = useRequest(getTicketFlows, {
-    manual: true,
-    onSuccess(data, params) {
-      if (params[0].id !== props.data.id) {
-        return;
-      }
-      flowList.value = data;
-    },
-  });
-
-  watch(
-    () => props.data,
-    (newData, oldData) => {
-      if (props.data) {
-        isLoading.value = newData.id !== oldData?.id;
-        fetchTicketFlows({
-          id: props.data.id,
-        }).finally(() => {
-          isLoading.value = false;
-        });
+  const { refresh: refreshTicketFlows } = useRequest(
+    () => {
+      if (!props.data) {
+        return Promise.reject();
       }
+      return getTicketFlows({
+        id: props.data.id,
+      });
     },
     {
-      immediate: true,
+      manual: true,
+      onSuccess(data) {
+        flowList.value = data;
+        loopFetchTicketStatus();
+        isLoading.value = false;
+      },
     },
   );
+
   watch(
-    route,
+    () => props.data,
     () => {
+      isLoading.value = true;
       isCardCollapse.value = true;
+      refreshTicketFlows();
     },
     {
       immediate: true,
     },
   );
+  const { start: loopFetchTicketStatus } = useTimeoutFn(() => {
+    refreshTicketFlows();
+  }, 3000);
 </script>
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-import-sqlfile/components/render-sqlfile/Index.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-import-sqlfile/components/render-sqlfile/Index.vue
index a2cd342740..317c0b05e2 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-import-sqlfile/components/render-sqlfile/Index.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-import-sqlfile/components/render-sqlfile/Index.vue
@@ -1,10 +1,9 @@
 <template>
   <BkSideslider
+    v-model:is-show="isShow"
     class="sql-log-sideslider"
-    :is-show="isShow"
     :title="t('执行SQL变更_内容详情')"
-    :width="960"
-    @close="handleClose">
+    :width="960">
     <template
       v-if="executeObject"
       #header>
@@ -116,7 +115,7 @@
   );
 
   watch(
-    () => isShow,
+    isShow,
     () => {
       if (isShow.value) {
         localSelectFileName.value = props.selectFileName;
@@ -129,10 +128,6 @@
       immediate: true,
     },
   );
-
-  const handleClose = () => {
-    isShow.value = false;
-  };
 </script>
 <style lang="less">
   .sql-log-sideslider {
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/SpecInfos.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/SpecInfos.vue
index 2b3591ef6c..2f52d9763a 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/SpecInfos.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/SpecInfos.vue
@@ -15,7 +15,6 @@
       <span class="info-title">{{ $t('磁盘') }}：</span>
       <span class="info-value">
         <DbOriginalTable
-          :border="['row', 'col', 'outer']"
           class="custom-edit-table mt-8"
           :columns="columns"
           :data="data.storage_spec" />
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Apply.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Apply.vue
index 5c1313a331..c264fe9295 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Apply.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Apply.vue
@@ -100,7 +100,7 @@
           :label="t('集群分片')">
         </BkTableColumn>
         <BkTableColumn
-          field="cluster_shard_num"
+          field="qps"
           :label="t('集群QPS每秒')">
           <template #default="{data}: {data: ClusterSpecModel}">
             {{ data.qps.min * data.machine_pair || '--' }}