From 49b890ba40083deded4e95933b918df584646461 Mon Sep 17 00:00:00 2001
From: hlinx <327159425@qq.com>
Date: Wed, 1 Nov 2023 15:01:13 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BF=AE=E5=A4=8D=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=B7=E5=BC=8F=E9=94=99=E4=B9=B1=20#1607?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/styles/common.less        |  34 +-
 .../views/db-configure/business/Detail.vue    |  57 +-
 .../db-configure/business/list/Index.vue      |   5 +-
 .../views/db-configure/components/TopTab.vue  |  13 +-
 .../views/db-configure/platform/Detail.vue    |  40 +-
 .../src/views/db-configure/platform/List.vue  |  97 ++-
 .../src/views/main-views/pages/Database.vue   |   2 +-
 .../monitor-strategy/Index.vue                |  45 +-
 .../global-strategy/Index.vue                 |  36 +-
 .../rotation-setting/Index.vue                |  44 +-
 .../views/mysql/common/edit-field/DbName.vue  |   2 +-
 .../src/views/mysql/toolbox/index.vue         |   9 +-
 .../src/views/redis/apply/ApplyRedis.vue      | 552 +++++++++---------
 dbm-ui/frontend/src/views/redis/routes.ts     |   1 +
 .../src/views/redis/toolbox/Index.vue         |  10 -
 .../src/views/spider-manage/apply/Index.vue   | 184 +++---
 .../src/views/spider-manage/toolbox/Index.vue |  18 -
 .../version-files/pages/VersionFiles.vue      |  13 +-
 18 files changed, 585 insertions(+), 577 deletions(-)

diff --git a/dbm-ui/frontend/src/styles/common.less b/dbm-ui/frontend/src/styles/common.less
index b93a3691f0..17bf7937dd 100644
--- a/dbm-ui/frontend/src/styles/common.less
+++ b/dbm-ui/frontend/src/styles/common.less
@@ -246,24 +246,24 @@
 }
 
 /** 面包屑下 tabs 样式 */
-.top-tabs {
-  position: absolute !important;
-  top: 52px;
-  left: 0;
-  z-index: 11;
-  width: 100%;
-  padding: 0 16px;
-  background-color: @white-color;
-  box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
-
-  .bk-tab-header {
-    border-bottom: 0;
-  }
+// .top-tabs {
+// position: absolute !important;
+// top: 52px;
+// left: 0;
+// z-index: 11;
+// width: 100%;
+// padding: 0 16px;
+// background-color: @white-color;
+// box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
+
+// .bk-tab-header {
+//   border-bottom: 0;
+// }
 
-  .bk-tab-content {
-    padding: 0 !important;
-  }
-}
+// .bk-tab-content {
+//   padding: 0 !important;
+// }
+// }
 
 /** 自定义面包屑 */
 .main-breadcrumbs.custom-main-breadcrumbs {
diff --git a/dbm-ui/frontend/src/views/db-configure/business/Detail.vue b/dbm-ui/frontend/src/views/db-configure/business/Detail.vue
index b551d9ca71..27d330549e 100644
--- a/dbm-ui/frontend/src/views/db-configure/business/Detail.vue
+++ b/dbm-ui/frontend/src/views/db-configure/business/Detail.vue
@@ -13,11 +13,6 @@
 
 <template>
   <div class="config-biz-details">
-    <MainBreadcrumbs>
-      <template #append>
-        <div class="operations" />
-      </template>
-    </MainBreadcrumbs>
     <BkTab
       v-model:active="state.activeTab"
       class="top-tabs"
@@ -57,8 +52,6 @@
 
   import { confLevelInfos, ConfLevels } from '@common/const';
 
-  import MainBreadcrumbs from '@components/layouts/MainBreadcrumbs.vue';
-
   import DetailsBase from '../components/DetailsBase.vue';
   import PublishRecord from '../components/PublishRecord.vue';
   import { useLevelParams } from '../hooks/useLevelParams';
@@ -140,47 +133,35 @@
   }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
   @import "@styles/mixins.less";
 
-  .config-biz-details {
-    height: 100%;
+  .config-biz-details{
+    .top-tabs{
+      background: #fff;
+      box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
 
-    :deep(.base-card) {
-      margin-bottom: 16px;
+      .bk-tab-content{
+        display: none;
+      }
     }
-  }
-
-  .operations {
-    .flex-center();
 
-    &__button {
-      width: 76px;
-      margin-left: 8px;
-      font-size: @font-size-mini;
-    }
+    .config-biz-details {
+      height: 100%;
 
-    &__more {
-      display: block;
-      width: 26px;
-      margin-left: 8px;
-      font-size: @font-size-large;
-      line-height: 26px;
-      cursor: pointer;
-      border-radius: 2px;
-
-      &:hover {
-        background-color: @bg-dark-gray;
+      .base-card {
+        margin-bottom: 16px;
       }
     }
-  }
 
-  .details-content {
-    height: calc(100% - 52px);
-    padding: 66px 24px 24px;
+    .details-content {
+      height: calc(100vh - 152px);
+      padding: 24px;
 
-    :deep(.details-base) {
-      height: 100%;
+      .details-base {
+        height: 100%;
+      }
     }
   }
+
 </style>
diff --git a/dbm-ui/frontend/src/views/db-configure/business/list/Index.vue b/dbm-ui/frontend/src/views/db-configure/business/list/Index.vue
index 5f2d01374e..f6c52e31bc 100644
--- a/dbm-ui/frontend/src/views/db-configure/business/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-configure/business/list/Index.vue
@@ -19,7 +19,6 @@
     </template>
   </div>
 </template>
-
 <script setup lang="ts">
   import { useMainViewStore } from '@stores';
 
@@ -59,10 +58,8 @@
     });
   });
 </script>
-
 <style lang="less">
   .business-db-configure-list-page {
-    height: 100%;
-    padding-top: 41px;
+    height: calc(100vh - 150px);
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/db-configure/components/TopTab.vue b/dbm-ui/frontend/src/views/db-configure/components/TopTab.vue
index 5ef88a0d37..95c3a9c476 100644
--- a/dbm-ui/frontend/src/views/db-configure/components/TopTab.vue
+++ b/dbm-ui/frontend/src/views/db-configure/components/TopTab.vue
@@ -14,7 +14,7 @@
 <template>
   <BkTab
     v-model:active="active"
-    class="top-tabs"
+    class="db-configur-type-tab"
     type="unborder-card"
     @change="handleChange">
     <BkTabPanel
@@ -24,7 +24,6 @@
       :name="tab.id" />
   </BkTab>
 </template>
-
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
@@ -117,3 +116,13 @@
     emit('change', value);
   }
 </script>
+<style lang="less">
+.db-configur-type-tab{
+  background: #fff;
+  box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
+
+  .bk-tab-content{
+    display: none;
+  }
+}
+</style>
diff --git a/dbm-ui/frontend/src/views/db-configure/platform/Detail.vue b/dbm-ui/frontend/src/views/db-configure/platform/Detail.vue
index 1b0dba9889..cc1577e820 100644
--- a/dbm-ui/frontend/src/views/db-configure/platform/Detail.vue
+++ b/dbm-ui/frontend/src/views/db-configure/platform/Detail.vue
@@ -12,8 +12,7 @@
 -->
 
 <template>
-  <div class="configure-details">
-    <MainBreadcrumbs class="custom-main-breadcrumbs" />
+  <div class="configure-details-page">
     <BkTab
       v-model:active="state.activeTab"
       class="top-tabs"
@@ -49,8 +48,6 @@
 
   import { confLevelInfos, ConfLevels } from '@common/const';
 
-  import MainBreadcrumbs from '@components/layouts/MainBreadcrumbs.vue';
-
   import DetailsBase from '../components/DetailsBase.vue';
   import PublishRecord from '../components/PublishRecord.vue';
 
@@ -132,25 +129,32 @@
   }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
   @import "@styles/mixins.less";
 
-  .configure-details {
-    height: 100%;
-  }
+  .configure-details-page{
+    .top-tabs{
+      background: #fff;
+      box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
+
+      .bk-tab-content{
+        display: none;
+      }
+    }
 
-  .operations {
-    .flex-center();
+    .operations {
+      .flex-center();
 
-    &__button {
-      width: 76px;
-      margin-left: 8px;
-      font-size: @font-size-mini;
+      &__button {
+        width: 76px;
+        margin-left: 8px;
+        font-size: @font-size-mini;
+      }
     }
-  }
 
-  .details-content {
-    height: 100%;
-    padding: 118px 24px 24px;
+    .details-content {
+      height: calc(100vh - 105px);
+      padding: 24px;
+    }
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/db-configure/platform/List.vue b/dbm-ui/frontend/src/views/db-configure/platform/List.vue
index 2e4eacbb5f..4b1a160e97 100644
--- a/dbm-ui/frontend/src/views/db-configure/platform/List.vue
+++ b/dbm-ui/frontend/src/views/db-configure/platform/List.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <div class="configure-container">
+  <div class="platform-db-configure-page">
     <TopTab @change="handleChangeTab" />
     <BkTab
       v-show="showTabs"
@@ -26,13 +26,11 @@
         :label="tab.name"
         :name="tab.confType" />
     </BkTab>
-    <div
-      class="configure-content"
-      :class="[{ 'configure-content--padding': showTabs }]">
+    <div class="configure-content">
       <BkLoading :loading="state.loading">
         <DbOriginalTable
           :key="state.clusterType"
-          class="configure-content__table"
+          class="configure-content-table"
           :columns="columns"
           :data="state.data"
           :is-anomalies="isAnomalies"
@@ -52,6 +50,8 @@
 
   import { useTableMaxHeight } from '@hooks';
 
+  import { useMainViewStore } from '@stores';
+
   import type { ClusterTypesValues } from '@common/const';
 
   import { extraClusterConfs, getDefaultConf } from '../common/const';
@@ -60,6 +60,8 @@
 
   const { t } = useI18n();
   const router = useRouter();
+  const mainViewStore = useMainViewStore();
+  mainViewStore.hasPadding = false;
 
   const state = reactive({
     confType: 'dbconf',
@@ -76,31 +78,37 @@
   /**
    * table 设置
    */
-  const columns: Column[] = [{
-    label: t('名称'),
-    field: 'name',
-    render: ({ cell, data }: { cell: string, data: ConfigListItem }) => (
+  const columns: Column[] = [
+    {
+      label: t('名称'),
+      field: 'name',
+      render: ({ cell, data }: { cell: string, data: ConfigListItem }) => (
       <bk-button text theme="primary" onClick={handleToDetails.bind(this, data)}>{cell}</bk-button>
     ),
-  }, {
-    label: t('数据库版本'),
-    field: 'version',
-  }, {
-    label: t('更新时间'),
-    field: 'updated_at',
-  }, {
-    label: t('更新人'),
-    field: 'updated_by',
-    render: ({ cell }: { cell: string }) => cell || '--',
-  }, {
-    label: t('操作'),
-    field: 'operation',
-    render: ({ data }: { data: ConfigListItem }) => (
+    },
+    {
+      label: t('数据库版本'),
+      field: 'version',
+    },
+    {
+      label: t('更新时间'),
+      field: 'updated_at',
+    },
+    {
+      label: t('更新人'),
+      field: 'updated_by',
+      render: ({ cell }: { cell: string }) => cell || '--',
+    },
+    {
+      label: t('操作'),
+      field: 'operation',
+      render: ({ data }: { data: ConfigListItem }) => (
       <div class="operation">
         <bk-button text theme="primary" class="mr-24" onClick={handleUpdateDetails.bind(this, data)}>{ t('编辑') }</bk-button>
       </div>
     ),
-  }];
+    },
+  ];
 
   /**
    * 集群配置
@@ -184,36 +192,27 @@
   };
 </script>
 
-<style lang="less" scoped>
-  .configure-container {
-    height: calc(100% - 42px);
-    margin-top: 42px;
-    background-color: @bg-white;
-  }
-
-  .conf-tabs {
-    margin-bottom: 16px;
-    background-color: #fafbfd;
+<style lang="less">
+  .platform-db-configure-page{
+    height: calc(100vh - 150px);
 
-    :deep(.bk-tab-content) {
-      display: none;
-      padding: 0;
-    }
+    .conf-tabs {
+      background: #fff;
+      box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
 
-    :deep(.bk-tab-header--active) {
-      background-color: @bg-white;
+      .bk-tab-content{
+        display: none;
+      }
     }
-  }
 
-  .configure-content {
-    &--padding {
-      padding: 0 16px;
-    }
+    .configure-content {
+      padding: 24px;
 
-    &__table {
-      :deep(.table-header-type) {
-        line-height: 20px;
-        border-bottom: 1px dashed @light-gray;
+      .configure-content-table{
+        .table-header-type {
+          line-height: 20px;
+          border-bottom: 1px dashed @light-gray;
+        }
       }
     }
   }
diff --git a/dbm-ui/frontend/src/views/main-views/pages/Database.vue b/dbm-ui/frontend/src/views/main-views/pages/Database.vue
index cbf2907948..317d87f1d5 100644
--- a/dbm-ui/frontend/src/views/main-views/pages/Database.vue
+++ b/dbm-ui/frontend/src/views/main-views/pages/Database.vue
@@ -172,7 +172,7 @@
                 <span
                   v-overflow-tips.right
                   class="text-overflow">
-                  {{ $t('账号规则') }}
+                  {{ $t('授权规则') }}
                 </span>
               </BkMenuItem>
               <!-- <BkMenuItem key="spiderPermissionList">
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-db/monitor-strategy/Index.vue b/dbm-ui/frontend/src/views/monitor-alarm-db/monitor-strategy/Index.vue
index 58e839522d..2854ef13d2 100644
--- a/dbm-ui/frontend/src/views/monitor-alarm-db/monitor-strategy/Index.vue
+++ b/dbm-ui/frontend/src/views/monitor-alarm-db/monitor-strategy/Index.vue
@@ -12,21 +12,22 @@
 -->
 
 <template>
-  <BkTab
-    v-model:active="activeTab"
-    class="top-tabs"
-    type="unborder-card">
-    <BkTabPanel
-      v-for="tab of tabs"
-      :key="tab.label"
-      :label="tab.label"
-      :name="tab.value" />
-  </BkTab>
-  <div class="monitor-strategy-content">
-    <TypeContent :active-db-type="activeTab" />
+  <div class="monitor-strategy-page">
+    <BkTab
+      v-model:active="activeTab"
+      class="top-tabs"
+      type="unborder-card">
+      <BkTabPanel
+        v-for="tab of tabs"
+        :key="tab.label"
+        :label="tab.label"
+        :name="tab.value" />
+    </BkTab>
+    <div class="monitor-strategy-content">
+      <TypeContent :active-db-type="activeTab" />
+    </div>
   </div>
 </template>
-
 <script setup lang="ts">
   import { useRoute } from 'vue-router';
 
@@ -80,8 +81,20 @@
   const activeTab = ref(dbType ? dbType : tabs[0].value);
 
 </script>
-<style lang="less" scoped>
-.monitor-strategy-content {
-  margin-top: 35px;
+<style lang="less">
+.monitor-strategy-page{
+  .top-tabs{
+    background: #fff;
+    box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
+
+    .bk-tab-content{
+      display: none;
+    }
+  }
+
+  .monitor-strategy-content {
+    height: calc(100vh - 150px);
+    padding: 24px;
+  }
 }
 </style>
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-plat/global-strategy/Index.vue b/dbm-ui/frontend/src/views/monitor-alarm-plat/global-strategy/Index.vue
index d84e8489f9..a92b3b226d 100644
--- a/dbm-ui/frontend/src/views/monitor-alarm-plat/global-strategy/Index.vue
+++ b/dbm-ui/frontend/src/views/monitor-alarm-plat/global-strategy/Index.vue
@@ -12,18 +12,20 @@
 -->
 
 <template>
-  <BkTab
-    v-model:active="activeTab"
-    class="top-tabs"
-    type="unborder-card">
-    <BkTabPanel
-      v-for="tab of tabs"
-      :key="tab.label"
-      :label="tab.label"
-      :name="tab.value" />
-  </BkTab>
-  <div class="global-strategy-content">
-    <TypeContent :active-db-type="activeTab" />
+  <div class="monitor-alart-global-strategy-page">
+    <BkTab
+      v-model:active="activeTab"
+      class="top-tabs"
+      type="unborder-card">
+      <BkTabPanel
+        v-for="tab of tabs"
+        :key="tab.label"
+        :label="tab.label"
+        :name="tab.value" />
+    </BkTab>
+    <div class="global-strategy-content">
+      <TypeContent :active-db-type="activeTab" />
+    </div>
   </div>
 </template>
 
@@ -76,9 +78,11 @@
   const activeTab = ref(tabs[0].value);
 
 </script>
-<style lang="less" scoped>
-
-.global-strategy-content {
-  margin-top: 35px;
+<style lang="less">
+.monitor-alart-global-strategy-page{
+  .global-strategy-content {
+    margin-top: 35px;
+  }
 }
+
 </style>
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-plat/rotation-setting/Index.vue b/dbm-ui/frontend/src/views/monitor-alarm-plat/rotation-setting/Index.vue
index cc10d981b5..6c955ab219 100644
--- a/dbm-ui/frontend/src/views/monitor-alarm-plat/rotation-setting/Index.vue
+++ b/dbm-ui/frontend/src/views/monitor-alarm-plat/rotation-setting/Index.vue
@@ -12,21 +12,22 @@
 -->
 
 <template>
-  <BkTab
-    v-model:active="activeTab"
-    class="top-tabs"
-    type="unborder-card">
-    <BkTabPanel
-      v-for="tab of tabs"
-      :key="tab.label"
-      :label="tab.label"
-      :name="tab.value" />
-  </BkTab>
-  <div class="content">
-    <TypeContent :active-db-type="activeTab" />
+  <div class="monitor-alarm-plat-page">
+    <BkTab
+      v-model:active="activeTab"
+      class="top-tabs"
+      type="unborder-card">
+      <BkTabPanel
+        v-for="tab of tabs"
+        :key="tab.label"
+        :label="tab.label"
+        :name="tab.value" />
+    </BkTab>
+    <div class="content">
+      <TypeContent :active-db-type="activeTab" />
+    </div>
   </div>
 </template>
-
 <script setup lang="ts">
   import TypeContent from './components/content/Index.vue';
 
@@ -77,7 +78,20 @@
 
 </script>
 <style lang="less" scoped>
-.content {
-  margin-top: 36px;
+
+.monitor-alarm-plat-page{
+  .top-tabs{
+    background: #fff;
+    box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
+
+    .bk-tab-content{
+      display: none;
+    }
+  }
+
+  .content {
+    height: calc(100vh - 150px);
+    padding: 24px;
+  }
 }
 </style>
diff --git a/dbm-ui/frontend/src/views/mysql/common/edit-field/DbName.vue b/dbm-ui/frontend/src/views/mysql/common/edit-field/DbName.vue
index 7b4e03df8a..5da2713c50 100644
--- a/dbm-ui/frontend/src/views/mysql/common/edit-field/DbName.vue
+++ b/dbm-ui/frontend/src/views/mysql/common/edit-field/DbName.vue
@@ -57,7 +57,7 @@
     modelValue?: string [],
     clusterId: number,
     required?: boolean,
-    single: boolean,
+    single?: boolean,
     checkExist?: boolean
     rules?: {
       validator: (value: string[]) => boolean,
diff --git a/dbm-ui/frontend/src/views/mysql/toolbox/index.vue b/dbm-ui/frontend/src/views/mysql/toolbox/index.vue
index 0f3dd1f3a3..44c55abe01 100644
--- a/dbm-ui/frontend/src/views/mysql/toolbox/index.vue
+++ b/dbm-ui/frontend/src/views/mysql/toolbox/index.vue
@@ -12,9 +12,6 @@
 -->
 
 <template>
-  <MainBreadcrumbs>
-    <span class="custom-breadcrumbs">{{ $t('MySQL_工具箱') }}</span>
-  </MainBreadcrumbs>
   <BkResizeLayout
     :border="false"
     class="toolbox"
@@ -33,8 +30,6 @@
 <script setup lang="ts">
   import { useMainViewStore } from '@stores';
 
-  import MainBreadcrumbs from '@components/layouts/MainBreadcrumbs.vue';
-
   import ToolboxContent from './components/ToolboxContent.vue';
   import ToolboxSide from './components/ToolboxSide.vue';
 
@@ -46,7 +41,9 @@
       mainViewStore.hasPadding = false;
       mainViewStore.customBreadcrumbs = true;
     }
-  }, { immediate: true });
+  }, {
+    immediate: true,
+  });
 </script>
 
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/views/redis/apply/ApplyRedis.vue b/dbm-ui/frontend/src/views/redis/apply/ApplyRedis.vue
index 72657f9f72..70d0c8c0a2 100644
--- a/dbm-ui/frontend/src/views/redis/apply/ApplyRedis.vue
+++ b/dbm-ui/frontend/src/views/redis/apply/ApplyRedis.vue
@@ -12,280 +12,282 @@
 -->
 
 <template>
-  <div class="apply-instance">
-    <DbForm
-      ref="formRef"
-      auto-label-width
-      class="apply-form"
-      :model="state.formdata"
-      :rules="rules">
-      <DbCard :title="t('业务信息')">
-        <BusinessItems
-          v-model:app-abbr="state.formdata.details.db_app_abbr"
-          v-model:biz-id="state.formdata.bk_biz_id"
-          @change-biz="handleChangeBiz" />
-        <ClusterName v-model="state.formdata.details.cluster_name" />
-        <ClusterAlias
-          v-model="state.formdata.details.cluster_alias"
-          :biz-id="state.formdata.bk_biz_id"
-          cluster-type="redis" />
-        <CloudItem
-          v-model="state.formdata.details.bk_cloud_id"
-          @change="handleChangeCloud" />
-      </DbCard>
-      <RegionItem v-model="state.formdata.details.city_code" />
-      <DbCard :title="t('部署需求')">
-        <BkFormItem
-          :label="t('部署架构')"
-          property="details.cluster_type"
-          required>
-          <BkRadioGroup
-            v-model="state.formdata.details.cluster_type"
-            class="item-input"
-            @change="handleChangeClusterType">
-            <BkPopover
-              v-for="item of renderRedisClusterTypes"
-              :key="item.id"
-              placement="top"
-              :popover-delay="0"
-              theme="light"
-              trigger="hover">
-              <BkRadioButton :label="item.id">
+  <SmartAction :offset-target="getSmartActionOffsetTarget">
+    <div class="apply-instance">
+      <DbForm
+        ref="formRef"
+        auto-label-width
+        class="apply-form"
+        :model="state.formdata"
+        :rules="rules">
+        <DbCard :title="t('业务信息')">
+          <BusinessItems
+            v-model:app-abbr="state.formdata.details.db_app_abbr"
+            v-model:biz-id="state.formdata.bk_biz_id"
+            @change-biz="handleChangeBiz" />
+          <ClusterName v-model="state.formdata.details.cluster_name" />
+          <ClusterAlias
+            v-model="state.formdata.details.cluster_alias"
+            :biz-id="state.formdata.bk_biz_id"
+            cluster-type="redis" />
+          <CloudItem
+            v-model="state.formdata.details.bk_cloud_id"
+            @change="handleChangeCloud" />
+        </DbCard>
+        <RegionItem v-model="state.formdata.details.city_code" />
+        <DbCard :title="t('部署需求')">
+          <BkFormItem
+            :label="t('部署架构')"
+            property="details.cluster_type"
+            required>
+            <BkRadioGroup
+              v-model="state.formdata.details.cluster_type"
+              class="item-input"
+              @change="handleChangeClusterType">
+              <BkPopover
+                v-for="item of renderRedisClusterTypes"
+                :key="item.id"
+                placement="top"
+                :popover-delay="0"
+                theme="light"
+                trigger="hover">
+                <BkRadioButton :label="item.id">
+                  {{ item.text }}
+                </BkRadioButton>
+                <template #content>
+                  <div class="apply-instance__content">
+                    <h4>{{ item.tipContent.title }}</h4>
+                    <p>{{ item.tipContent.desc }}</p>
+                    <img
+                      :src="item.tipContent.img"
+                      width="550">
+                  </div>
+                </template>
+              </BkPopover>
+            </BkRadioGroup>
+          </BkFormItem>
+          <BkFormItem
+            :label="t('版本')"
+            property="details.db_version"
+            required>
+            <BkSelect
+              v-model="state.formdata.details.db_version"
+              class="item-input"
+              :clearable="false"
+              filterable
+              :input-search="false"
+              :list="state.versions"
+              :loading="state.isLoadVersion" />
+          </BkFormItem>
+          <BkFormItem
+            :label="t('服务器选择')"
+            property="details.ip_source"
+            required>
+            <BkRadioGroup
+              v-model="state.formdata.details.ip_source"
+              class="item-input"
+              @change="fetchCapSpecs(state.formdata.details.city_code)">
+              <BkRadioButton
+                v-for="item of Object.values(redisIpSources)"
+                :key="item.id"
+                :label="item.id">
                 {{ item.text }}
               </BkRadioButton>
-              <template #content>
-                <div class="apply-instance__content">
-                  <h4>{{ item.tipContent.title }}</h4>
-                  <p>{{ item.tipContent.desc }}</p>
-                  <img
-                    :src="item.tipContent.img"
-                    width="550">
+            </BkRadioGroup>
+          </BkFormItem>
+          <Transition
+            mode="out-in"
+            name="dbm-fade">
+            <div
+              v-if="isManualInput"
+              class="mb-24">
+              <DbFormItem
+                label="Proxy"
+                property="details.nodes.proxy"
+                required>
+                <IpSelector
+                  :biz-id="state.formdata.bk_biz_id"
+                  :cloud-info="cloudInfo"
+                  :data="state.formdata.details.nodes.proxy"
+                  :disable-dialog-submit-method="ipSelectorDisableSubmitMethods.proxy"
+                  :disable-host-method="proxyDisableHostMethod"
+                  @change="handleProxyIpChange">
+                  <template #desc>
+                    {{ t('至少n台', { n: 2 }) }}
+                  </template>
+                  <template #submitTips="{ hostList }">
+                    <I18nT
+                      keypath="至少n台_已选n台"
+                      style="font-size: 14px; color: #63656e;"
+                      tag="span">
+                      <span style="font-weight: bold; color: #2dcb56;"> 2 </span>
+                      <span style="font-weight: bold; color: #3a84ff;"> {{ hostList.length }} </span>
+                    </I18nT>
+                  </template>
+                </IpSelector>
+              </DbFormItem>
+              <BkFormItem
+                v-if="state.formdata.details.nodes.proxy.length > 0"
+                label="">
+                <div class="apply-instance__inline">
+                  <BkFormItem
+                    :label="t('Proxy端口')"
+                    label-width="110"
+                    property="details.proxy_port"
+                    required>
+                    <BkInput
+                      v-model="state.formdata.details.proxy_port"
+                      :max="65535"
+                      :min="1025"
+                      style="width: 120px;"
+                      type="number" />
+                    <span class="ml-16">{{ t('从n起', { n: state.formdata.details.proxy_port }) }}</span>
+                  </BkFormItem>
                 </div>
-              </template>
-            </BkPopover>
-          </BkRadioGroup>
-        </BkFormItem>
-        <BkFormItem
-          :label="t('版本')"
-          property="details.db_version"
-          required>
-          <BkSelect
-            v-model="state.formdata.details.db_version"
-            class="item-input"
-            :clearable="false"
-            filterable
-            :input-search="false"
-            :list="state.versions"
-            :loading="state.isLoadVersion" />
-        </BkFormItem>
-        <BkFormItem
-          :label="t('服务器选择')"
-          property="details.ip_source"
-          required>
-          <BkRadioGroup
-            v-model="state.formdata.details.ip_source"
-            class="item-input"
-            @change="fetchCapSpecs(state.formdata.details.city_code)">
-            <BkRadioButton
-              v-for="item of Object.values(redisIpSources)"
-              :key="item.id"
-              :label="item.id">
-              {{ item.text }}
-            </BkRadioButton>
-          </BkRadioGroup>
-        </BkFormItem>
-        <Transition
-          mode="out-in"
-          name="dbm-fade">
-          <div
-            v-if="isManualInput"
-            class="mb-24">
-            <DbFormItem
-              label="Proxy"
-              property="details.nodes.proxy"
-              required>
-              <IpSelector
-                :biz-id="state.formdata.bk_biz_id"
-                :cloud-info="cloudInfo"
-                :data="state.formdata.details.nodes.proxy"
-                :disable-dialog-submit-method="ipSelectorDisableSubmitMethods.proxy"
-                :disable-host-method="proxyDisableHostMethod"
-                @change="handleProxyIpChange">
-                <template #desc>
-                  {{ t('至少n台', { n: 2 }) }}
-                </template>
-                <template #submitTips="{ hostList }">
-                  <I18nT
-                    keypath="至少n台_已选n台"
-                    style="font-size: 14px; color: #63656e;"
-                    tag="span">
-                    <span style="font-weight: bold; color: #2dcb56;"> 2 </span>
-                    <span style="font-weight: bold; color: #3a84ff;"> {{ hostList.length }} </span>
-                  </I18nT>
-                </template>
-              </IpSelector>
-            </DbFormItem>
-            <BkFormItem
-              v-if="state.formdata.details.nodes.proxy.length > 0"
-              label="">
-              <div class="apply-instance__inline">
-                <BkFormItem
-                  :label="t('Proxy端口')"
-                  label-width="110"
-                  property="details.proxy_port"
-                  required>
-                  <BkInput
-                    v-model="state.formdata.details.proxy_port"
-                    :max="65535"
-                    :min="1025"
-                    style="width: 120px;"
-                    type="number" />
-                  <span class="ml-16">{{ t('从n起', { n: state.formdata.details.proxy_port }) }}</span>
-                </BkFormItem>
-              </div>
-            </BkFormItem>
-            <DbFormItem
-              ref="masterRef"
-              label="Master"
-              property="details.nodes.master"
-              required>
-              <IpSelector
-                :biz-id="state.formdata.bk_biz_id"
-                :cloud-info="cloudInfo"
-                :data="state.formdata.details.nodes.master"
-                :disable-dialog-submit-method="ipSelectorDisableSubmitMethods.master"
-                :disable-host-method="masterDisableHostMethod"
-                @change="handleMasterIpChange">
-                <template #desc>
-                  {{ t('至少1台_且机器数要和Slave相等') }}
-                </template>
-                <template #submitTips="{ hostList }">
-                  <I18nT
-                    keypath="至少n台_已选n台"
-                    style="font-size: 14px; color: #63656e;"
-                    tag="span">
-                    <span style="font-weight: bold; color: #2dcb56;"> 1 </span>
-                    <span style="font-weight: bold; color: #3a84ff;"> {{ hostList.length }} </span>
-                  </I18nT>
-                </template>
-              </IpSelector>
-            </DbFormItem>
-            <DbFormItem
-              ref="slaveRef"
-              label="Slave"
-              property="details.nodes.slave"
-              required>
-              <IpSelector
-                :biz-id="state.formdata.bk_biz_id"
-                :cloud-info="cloudInfo"
-                :data="state.formdata.details.nodes.slave"
-                :disable-dialog-submit-method="ipSelectorDisableSubmitMethods.slave"
-                :disable-host-method="slaveDisableHostMethod"
-                @change="handleSlaveIpChange">
-                <template #desc>
-                  {{ t('至少1台_且机器数要和Master相等') }}
-                </template>
-                <template #submitTips="{ hostList }">
-                  <I18nT
-                    keypath="至少n台_已选n台"
-                    style="font-size: 14px; color: #63656e;"
-                    tag="span">
-                    <span style="font-weight: bold; color: #2dcb56;"> 1 </span>
-                    <span style="font-weight: bold; color: #3a84ff;"> {{ hostList.length }} </span>
-                  </I18nT>
-                </template>
-              </IpSelector>
-            </DbFormItem>
-            <!-- 保留了资源池逻辑，后续确认不需要可以去掉 -->
-            <BkFormItem
-              :label="isManualInput ? t('总容量') : t('申请容量')"
-              property="details.cap_key"
-              required>
-              <div
-                :key="capSpecsKey"
-                v-bk-tooltips="{
-                  disabled: !disableCapSpecs,
-                  content: t('请确保Master和Slave的机器数量至少1台且机器数要相等')
-                }"
-                class="item-input">
-                <BkSelect
-                  v-model="state.formdata.details.cap_key"
-                  class="item-input"
-                  :clearable="false"
-                  :disabled="disableCapSpecs"
-                  filterable
-                  :input-search="false"
-                  :loading="state.isLoadCapSpecs">
-                  <BkOption
-                    v-for="item of state.capSpecs"
-                    :key="item.cap_key"
-                    :label="getDispalyCapSpecs(item)"
-                    :value="item.cap_key" />
-                </BkSelect>
-              </div>
-              <p
-                v-if="isManualInput"
-                class="apply-form__tips">
-                {{ t('单实例容量x分片数_根据选择的主机自动计算所有的组合') }}
-              </p>
-            </BkFormItem>
-          </div>
-          <div
-            v-else
-            class="mb-24">
-            <BkFormItem
-              :label="t('Proxy规格')"
-              required>
-              <div class="resource-pool-item">
-                <BkFormItem
-                  :label="t('规格')"
-                  property="details.resource_spec.proxy.spec_id"
-                  required>
-                  <SpecSelector
-                    ref="specProxyRef"
-                    v-model="state.formdata.details.resource_spec.proxy.spec_id"
-                    :biz-id="state.formdata.bk_biz_id"
-                    :cloud-id="state.formdata.details.bk_cloud_id"
-                    :cluster-type="typeInfos.cluster_type"
-                    :machine-type="typeInfos.machine_type"
-                    style="width: 314px;" />
-                </BkFormItem>
-                <BkFormItem
-                  :label="t('数量')"
-                  property="details.resource_spec.proxy.count"
-                  required>
-                  <BkInput
-                    v-model="state.formdata.details.resource_spec.proxy.count"
-                    :min="2"
-                    type="number" />
-                  <span class="input-desc">{{ t('至少n台', {n: 2}) }}</span>
-                </BkFormItem>
-              </div>
-            </BkFormItem>
-            <BkFormItem
-              :label="t('后端存储规格')"
-              required>
-              <BackendQPSSpec
-                ref="specBackendRef"
-                v-model="state.formdata.details.resource_spec.backend_group"
-                :biz-id="state.formdata.bk_biz_id"
-                :cloud-id="state.formdata.details.bk_cloud_id"
-                :cluster-type="typeInfos.cluster_type"
-                :machine-type="typeInfos.backend_machine_type" />
-            </BkFormItem>
-          </div>
-        </Transition>
-        <BkFormItem :label="t('备注')">
-          <BkInput
-            v-model="state.formdata.remark"
-            :maxlength="100"
-            :placeholder="t('请提供更多有用信息申请信息_以获得更快审批')"
-            style="width: 655px;"
-            type="textarea" />
-        </BkFormItem>
-      </DbCard>
-    </DbForm>
-    <div class="absolute-footer">
+              </BkFormItem>
+              <DbFormItem
+                ref="masterRef"
+                label="Master"
+                property="details.nodes.master"
+                required>
+                <IpSelector
+                  :biz-id="state.formdata.bk_biz_id"
+                  :cloud-info="cloudInfo"
+                  :data="state.formdata.details.nodes.master"
+                  :disable-dialog-submit-method="ipSelectorDisableSubmitMethods.master"
+                  :disable-host-method="masterDisableHostMethod"
+                  @change="handleMasterIpChange">
+                  <template #desc>
+                    {{ t('至少1台_且机器数要和Slave相等') }}
+                  </template>
+                  <template #submitTips="{ hostList }">
+                    <I18nT
+                      keypath="至少n台_已选n台"
+                      style="font-size: 14px; color: #63656e;"
+                      tag="span">
+                      <span style="font-weight: bold; color: #2dcb56;"> 1 </span>
+                      <span style="font-weight: bold; color: #3a84ff;"> {{ hostList.length }} </span>
+                    </I18nT>
+                  </template>
+                </IpSelector>
+              </DbFormItem>
+              <DbFormItem
+                ref="slaveRef"
+                label="Slave"
+                property="details.nodes.slave"
+                required>
+                <IpSelector
+                  :biz-id="state.formdata.bk_biz_id"
+                  :cloud-info="cloudInfo"
+                  :data="state.formdata.details.nodes.slave"
+                  :disable-dialog-submit-method="ipSelectorDisableSubmitMethods.slave"
+                  :disable-host-method="slaveDisableHostMethod"
+                  @change="handleSlaveIpChange">
+                  <template #desc>
+                    {{ t('至少1台_且机器数要和Master相等') }}
+                  </template>
+                  <template #submitTips="{ hostList }">
+                    <I18nT
+                      keypath="至少n台_已选n台"
+                      style="font-size: 14px; color: #63656e;"
+                      tag="span">
+                      <span style="font-weight: bold; color: #2dcb56;"> 1 </span>
+                      <span style="font-weight: bold; color: #3a84ff;"> {{ hostList.length }} </span>
+                    </I18nT>
+                  </template>
+                </IpSelector>
+              </DbFormItem>
+              <!-- 保留了资源池逻辑，后续确认不需要可以去掉 -->
+              <BkFormItem
+                :label="isManualInput ? t('总容量') : t('申请容量')"
+                property="details.cap_key"
+                required>
+                <div
+                  :key="capSpecsKey"
+                  v-bk-tooltips="{
+                    disabled: !disableCapSpecs,
+                    content: t('请确保Master和Slave的机器数量至少1台且机器数要相等')
+                  }"
+                  class="item-input">
+                  <BkSelect
+                    v-model="state.formdata.details.cap_key"
+                    class="item-input"
+                    :clearable="false"
+                    :disabled="disableCapSpecs"
+                    filterable
+                    :input-search="false"
+                    :loading="state.isLoadCapSpecs">
+                    <BkOption
+                      v-for="item of state.capSpecs"
+                      :key="item.cap_key"
+                      :label="getDispalyCapSpecs(item)"
+                      :value="item.cap_key" />
+                  </BkSelect>
+                </div>
+                <p
+                  v-if="isManualInput"
+                  class="apply-form__tips">
+                  {{ t('单实例容量x分片数_根据选择的主机自动计算所有的组合') }}
+                </p>
+              </BkFormItem>
+            </div>
+            <div
+              v-else
+              class="mb-24">
+              <BkFormItem
+                :label="t('Proxy规格')"
+                required>
+                <div class="resource-pool-item">
+                  <BkFormItem
+                    :label="t('规格')"
+                    property="details.resource_spec.proxy.spec_id"
+                    required>
+                    <SpecSelector
+                      ref="specProxyRef"
+                      v-model="state.formdata.details.resource_spec.proxy.spec_id"
+                      :biz-id="state.formdata.bk_biz_id"
+                      :cloud-id="state.formdata.details.bk_cloud_id"
+                      :cluster-type="typeInfos.cluster_type"
+                      :machine-type="typeInfos.machine_type"
+                      style="width: 314px;" />
+                  </BkFormItem>
+                  <BkFormItem
+                    :label="t('数量')"
+                    property="details.resource_spec.proxy.count"
+                    required>
+                    <BkInput
+                      v-model="state.formdata.details.resource_spec.proxy.count"
+                      :min="2"
+                      type="number" />
+                    <span class="input-desc">{{ t('至少n台', {n: 2}) }}</span>
+                  </BkFormItem>
+                </div>
+              </BkFormItem>
+              <BkFormItem
+                :label="t('后端存储规格')"
+                required>
+                <BackendQPSSpec
+                  ref="specBackendRef"
+                  v-model="state.formdata.details.resource_spec.backend_group"
+                  :biz-id="state.formdata.bk_biz_id"
+                  :cloud-id="state.formdata.details.bk_cloud_id"
+                  :cluster-type="typeInfos.cluster_type"
+                  :machine-type="typeInfos.backend_machine_type" />
+              </BkFormItem>
+            </div>
+          </Transition>
+          <BkFormItem :label="t('备注')">
+            <BkInput
+              v-model="state.formdata.remark"
+              :maxlength="100"
+              :placeholder="t('请提供更多有用信息申请信息_以获得更快审批')"
+              style="width: 655px;"
+              type="textarea" />
+          </BkFormItem>
+        </DbCard>
+      </DbForm>
+    </div>
+    <template #action>
       <BkButton
         :loading="baseState.isSubmitting"
         theme="primary"
@@ -293,17 +295,19 @@
         {{ t('提交') }}
       </BkButton>
       <BkButton
+        class="ml-8"
         :disabled="baseState.isSubmitting"
         @click="handleResetFormdata">
         {{ t('重置') }}
       </BkButton>
       <BkButton
+        class="ml-8"
         :disabled="baseState.isSubmitting"
         @click="handleCancel">
         {{ t('取消') }}
       </BkButton>
-    </div>
-  </div>
+    </template>
+  </SmartAction>
 </template>
 
 <script setup lang="ts">
@@ -359,6 +363,8 @@
   const specBackendRef = ref();
   const capSpecsKey  = ref(generateId('CLUSTER_APPLAY_CAP_'));
 
+  const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
+
   const renderRedisClusterTypes = computed(() => {
     const values = Object.values(redisClusterTypes);
     const redisController = funControllerStore.funControllerData.redis;
diff --git a/dbm-ui/frontend/src/views/redis/routes.ts b/dbm-ui/frontend/src/views/redis/routes.ts
index 5da5592507..4962ea4285 100644
--- a/dbm-ui/frontend/src/views/redis/routes.ts
+++ b/dbm-ui/frontend/src/views/redis/routes.ts
@@ -208,6 +208,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           routeParentName: MainViewRouteNames.Database,
           navName: t('Redis_集群管理'),
+          activeMenu: 'DatabaseRedis',
         },
         component: () => import('@views/redis/list/Index.vue'),
       },
diff --git a/dbm-ui/frontend/src/views/redis/toolbox/Index.vue b/dbm-ui/frontend/src/views/redis/toolbox/Index.vue
index 4266581757..6d47249dac 100644
--- a/dbm-ui/frontend/src/views/redis/toolbox/Index.vue
+++ b/dbm-ui/frontend/src/views/redis/toolbox/Index.vue
@@ -12,9 +12,6 @@
 -->
 
 <template>
-  <MainBreadcrumbs>
-    <span class="custom-breadcrumbs">{{ $t('Redis_工具箱') }}</span>
-  </MainBreadcrumbs>
   <BkResizeLayout
     :border="false"
     class="toolbox"
@@ -33,8 +30,6 @@
 <script setup lang="ts">
   import { useMainViewStore } from '@stores';
 
-  import MainBreadcrumbs from '@components/layouts/MainBreadcrumbs.vue';
-
   import ToolboxContent from './components/ToolboxContent.vue';
   import ToolboxSide from './components/ToolboxSide.vue';
 
@@ -50,11 +45,6 @@
 </script>
 
 <style lang="less" scoped>
-.custom-breadcrumbs {
-  font-size: @font-size-large;
-  color: @title-color;
-}
-
 .toolbox {
   height: calc(100% - 52px);
 
diff --git a/dbm-ui/frontend/src/views/spider-manage/apply/Index.vue b/dbm-ui/frontend/src/views/spider-manage/apply/Index.vue
index efb254fdd0..505f6cf45a 100644
--- a/dbm-ui/frontend/src/views/spider-manage/apply/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/apply/Index.vue
@@ -12,94 +12,96 @@
 -->
 
 <template>
-  <div class="apply-instance">
-    <DbForm
-      ref="formRef"
-      auto-label-width
-      class="apply-form"
-      :model="formdata"
-      :rules="rules">
-      <DbCard :title="$t('业务信息')">
-        <BusinessItems
-          v-model:app-abbr="formdata.details.db_app_abbr"
-          v-model:biz-id="formdata.bk_biz_id"
-          @change-biz="handleChangeBiz" />
-        <ClusterName v-model="formdata.details.cluster_name" />
-        <ClusterAlias
-          v-model="formdata.details.cluster_alias"
-          :biz-id="formdata.bk_biz_id"
-          cluster-type="tendbcluster" />
-        <CloudItem v-model="formdata.details.bk_cloud_id" />
-      </DbCard>
-      <DbCard :title="$t('部署需求')">
-        <ModuleItem
-          v-model="formdata.details.db_module_id"
-          :biz-id="formdata.bk_biz_id" />
-        <BkFormItem
-          :label="$t('接入层Master')"
-          required>
-          <div class="resource-pool-item">
-            <BkFormItem
-              :label="$t('规格')"
-              property="details.resource_spec.spider.spec_id"
-              required>
-              <SpecSelector
-                ref="specProxyRef"
-                v-model="formdata.details.resource_spec.spider.spec_id"
-                :biz-id="formdata.bk_biz_id"
-                :cloud-id="formdata.details.bk_cloud_id"
-                cluster-type="tendbcluster"
-                machine-type="spider" />
-            </BkFormItem>
-            <BkFormItem
-              :label="$t('数量')"
-              property="details.resource_spec.spider.count"
-              required>
-              <BkInput
-                v-model="formdata.details.resource_spec.spider.count"
-                :min="2"
-                type="number" />
-              <span class="input-desc">{{ $t('至少n台', {n: 2}) }}</span>
-            </BkFormItem>
-          </div>
-        </BkFormItem>
-        <BkFormItem
-          :label="$t('后端存储规格')"
-          required>
-          <BackendQPSSpec
-            ref="specBackendRef"
-            v-model="formdata.details.resource_spec.backend_group"
+  <SmartAction :offset-target="getSmartActionOffsetTarget">
+    <div class="apply-instance">
+      <DbForm
+        ref="formRef"
+        auto-label-width
+        class="apply-form"
+        :model="formdata"
+        :rules="rules">
+        <DbCard :title="$t('业务信息')">
+          <BusinessItems
+            v-model:app-abbr="formdata.details.db_app_abbr"
+            v-model:biz-id="formdata.bk_biz_id"
+            @change-biz="handleChangeBiz" />
+          <ClusterName v-model="formdata.details.cluster_name" />
+          <ClusterAlias
+            v-model="formdata.details.cluster_alias"
             :biz-id="formdata.bk_biz_id"
-            :cloud-id="formdata.details.bk_cloud_id"
-            cluster-type="tendbcluster"
-            machine-type="remote" />
-        </BkFormItem>
-        <BkFormItem
-          :label="$t('访问端口')"
-          property="details.spider_port"
-          required>
-          <BkInput
-            v-model="formdata.details.spider_port"
-            clearable
-            :max="65535"
-            :min="25000"
-            style="width: 185px;"
-            type="number" />
-          <span class="input-desc">
-            {{ $t('范围min_max', {min: 25000, max: 65535}) }}
-          </span>
-        </BkFormItem>
-        <BkFormItem :label="$t('备注')">
-          <BkInput
-            v-model="formdata.remark"
-            :maxlength="100"
-            :placeholder="$t('请提供更多有用信息申请信息_以获得更快审批')"
-            style="width: 655px;"
-            type="textarea" />
-        </BkFormItem>
-      </DbCard>
-    </DbForm>
-    <div class="absolute-footer">
+            cluster-type="tendbcluster" />
+          <CloudItem v-model="formdata.details.bk_cloud_id" />
+        </DbCard>
+        <DbCard :title="$t('部署需求')">
+          <ModuleItem
+            v-model="formdata.details.db_module_id"
+            :biz-id="formdata.bk_biz_id" />
+          <BkFormItem
+            :label="$t('接入层Master')"
+            required>
+            <div class="resource-pool-item">
+              <BkFormItem
+                :label="$t('规格')"
+                property="details.resource_spec.spider.spec_id"
+                required>
+                <SpecSelector
+                  ref="specProxyRef"
+                  v-model="formdata.details.resource_spec.spider.spec_id"
+                  :biz-id="formdata.bk_biz_id"
+                  :cloud-id="formdata.details.bk_cloud_id"
+                  cluster-type="tendbcluster"
+                  machine-type="spider" />
+              </BkFormItem>
+              <BkFormItem
+                :label="$t('数量')"
+                property="details.resource_spec.spider.count"
+                required>
+                <BkInput
+                  v-model="formdata.details.resource_spec.spider.count"
+                  :min="2"
+                  type="number" />
+                <span class="input-desc">{{ $t('至少n台', {n: 2}) }}</span>
+              </BkFormItem>
+            </div>
+          </BkFormItem>
+          <BkFormItem
+            :label="$t('后端存储规格')"
+            required>
+            <BackendQPSSpec
+              ref="specBackendRef"
+              v-model="formdata.details.resource_spec.backend_group"
+              :biz-id="formdata.bk_biz_id"
+              :cloud-id="formdata.details.bk_cloud_id"
+              cluster-type="tendbcluster"
+              machine-type="remote" />
+          </BkFormItem>
+          <BkFormItem
+            :label="$t('访问端口')"
+            property="details.spider_port"
+            required>
+            <BkInput
+              v-model="formdata.details.spider_port"
+              clearable
+              :max="65535"
+              :min="25000"
+              style="width: 185px;"
+              type="number" />
+            <span class="input-desc">
+              {{ $t('范围min_max', {min: 25000, max: 65535}) }}
+            </span>
+          </BkFormItem>
+          <BkFormItem :label="$t('备注')">
+            <BkInput
+              v-model="formdata.remark"
+              :maxlength="100"
+              :placeholder="$t('请提供更多有用信息申请信息_以获得更快审批')"
+              style="width: 655px;"
+              type="textarea" />
+          </BkFormItem>
+        </DbCard>
+      </DbForm>
+    </div>
+    <template #action>
       <BkButton
         :loading="baseState.isSubmitting"
         theme="primary"
@@ -107,17 +109,19 @@
         {{ $t('提交') }}
       </BkButton>
       <BkButton
+        class="ml-8"
         :disabled="baseState.isSubmitting"
         @click="handleResetFormdata">
         {{ $t('重置') }}
       </BkButton>
       <BkButton
+        class="ml-8"
         :disabled="baseState.isSubmitting"
         @click="handleCancel">
         {{ $t('取消') }}
       </BkButton>
-    </div>
-  </div>
+    </template>
+  </SmartAction>
 </template>
 
 <script setup lang="ts">
@@ -141,6 +145,8 @@
 
   const { t } = useI18n();
 
+  const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
+
   const initData = () => ({
     bk_biz_id: '' as number | '',
     remark: '',
diff --git a/dbm-ui/frontend/src/views/spider-manage/toolbox/Index.vue b/dbm-ui/frontend/src/views/spider-manage/toolbox/Index.vue
index d75f5cab53..1e2992daf5 100644
--- a/dbm-ui/frontend/src/views/spider-manage/toolbox/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/toolbox/Index.vue
@@ -12,11 +12,6 @@
 -->
 
 <template>
-  <div class="top-title">
-    <MainBreadcrumbs>
-      <span class="custom-breadcrumbs">{{ $t('TendbCluster_工具箱') }}</span>
-    </MainBreadcrumbs>
-  </div>
   <BkResizeLayout
     :border="false"
     class="toolbox"
@@ -36,8 +31,6 @@
 
   import { useMainViewStore } from '@stores';
 
-  import MainBreadcrumbs from '@components/layouts/MainBreadcrumbs.vue';
-
   import ToolboxContent from './components/ToolboxContent.vue';
   import ToolboxSide from './components/ToolboxSide.vue';
 
@@ -55,17 +48,6 @@
   });
 </script>
 <style lang="less" scoped>
-.top-title {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.custom-breadcrumbs {
-  font-size: @font-size-large;
-  color: @title-color;
-}
-
 .toolbox {
   height: 100%;
 
diff --git a/dbm-ui/frontend/src/views/version-files/pages/VersionFiles.vue b/dbm-ui/frontend/src/views/version-files/pages/VersionFiles.vue
index d68ff618ae..e35ecc96cb 100644
--- a/dbm-ui/frontend/src/views/version-files/pages/VersionFiles.vue
+++ b/dbm-ui/frontend/src/views/version-files/pages/VersionFiles.vue
@@ -28,7 +28,6 @@
       :info="activeTabInfo" />
   </div>
 </template>
-
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
@@ -290,9 +289,15 @@
   });
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
   .version-files-view {
-    height: 100%;
-    padding-top: 42px;
+    .top-tabs{
+      background: #fff;
+      box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
+
+      .bk-tab-content{
+        display: none;
+      }
+    }
   }
 </style>