fix: 打开F12后侧边栏会把导航栏盖住且多次展开侧边栏会无限延伸 TencentBlueKing#3111

hLinx · Jul 10, 2024 · 1e72a16 · 1e72a16
1 parent 787ef56
commit 1e72a16
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 20 deletions.
diff --git a/src/frontend/src/components/site-frame/index.vue b/src/frontend/src/components/site-frame/index.vue
@@ -90,13 +90,13 @@
 <script>
   import _ from 'lodash';
 
-  import { getOffset } from '@/utils/assist';
-
   const PAGE_MIN_WIDTH = 1366;
   const PAGE_MIDDLE_WIDTH = 1920;
   const SIDE_LEFT_EXPAND_SMALL_WIDTH = 220;
   const SIDE_LEFT_EXPAND_BIG_WIDTH = 280;
   const SIDE_LEFT_INEXPAND_WIDTH = 60;
+  const SITE_HEADER_HEIGHT = 52;
+  const CONTENT_HEADER_HEIGHT = 52;
 
 
   export default {
@@ -113,8 +113,6 @@
         isSideHover: false,
         pageWidth: PAGE_MIN_WIDTH,
         sideLeftExpandWidth: 0,
-        sideOffsetTop: 52,
-        contentOffsetTop: 104,
       };
     },
     computed: {
@@ -127,7 +125,7 @@
         };
       },
       sideStyles() {
-        const height = `calc(100vh - ${this.sideOffsetTop}px)`;
+        const height = `calc(100vh - ${SITE_HEADER_HEIGHT}px - var(--notice-height))`;
         if (this.isSideHover) {
           return {
             width: `${this.sideLeftExpandWidth}px`,
@@ -149,7 +147,7 @@
       scrollStyles() {
         return {
           width: `calc(100vw - ${this.realSideWidth}px)`,
-          height: `calc(100vh - ${this.contentOffsetTop}px)`,
+          height: `calc(100vh - ${SITE_HEADER_HEIGHT}px - ${CONTENT_HEADER_HEIGHT}px - var(--notice-height))`,
         };
       },
       contentStyles() {
@@ -177,20 +175,9 @@
       const resizeHandler = _.throttle(this.init, 100);
       window.addEventListener('resize', resizeHandler);
 
-      const observer = new MutationObserver(_.throttle(() => {
-        this.sideOffsetTop = getOffset(this.$refs.side).top;
-        this.contentOffsetTop = getOffset(this.$refs.contentScroll.$el).top;
-      }, 100));
 
-      observer.observe(this.$refs.root, {
-        subtree: true,
-        childList: true,
-        attributeName: true,
-      });
       this.$once('hook:beforeDestroy', () => {
         window.removeEventListener('resize', resizeHandler);
-        observer.takeRecords();
-        observer.disconnect();
       });
     },
     methods: {

diff --git a/src/frontend/src/layout-new.vue b/src/frontend/src/layout-new.vue
@@ -26,10 +26,11 @@
 -->
 
 <template>
-  <div>
+  <div :style="{'--notice-height': isShowBKNotice ? '40px' : '0px'}">
     <notice-component
       v-if="isEnableBKNotice"
-      :api-url="noticApiUrl" />
+      :api-url="noticApiUrl"
+      @show-alert-change="showNoticChange" />
     <site-frame
       :side-fixed="isFrameSideFixed"
       @on-side-expand="handleSideExpandChange"
@@ -284,7 +285,8 @@
   import {
     computed,
     ref,
-    watch  } from 'vue';
+    watch,
+  } from 'vue';
 
   import QueryGlobalSettingService from '@service/query-global-setting';
 
@@ -314,6 +316,7 @@
   const routerTitle = ref('');
   const isEnableFeatureFileManage = ref(false);
   const isEnableBKNotice = ref(false);
+  const isShowBKNotice = ref(false);
 
   const route = useRoute();
   const router = useRouter();
@@ -370,6 +373,10 @@
   const handleSideExpandChange = (sideExpand) => {
     isSideExpand.value = sideExpand;
   };
+
+  const showNoticChange = (value) => {
+    isShowBKNotice.value = value;
+  };
   /**
    * @desc 跳转路由
    * @param {String} routerName 跳转的路由名