fix(frontend): 修复导航样式错乱 #1607

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 {

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>

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>

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>

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>

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;
+        }
       }
     }
   }