feat: 跨租户协同静态页面 TencentBlueKing#1684

# Reviewed, transaction id: 6981

src/pages/src/components/layouts/MainBreadcrumbs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-breadcrumbs">
+  <div :class="['main-breadcrumbs', { 'hidden-box-shadow': hiddenBoxShadow }]">
     <slot>
       <i
         v-if="showBack"
@@ -31,6 +31,9 @@ const current = computed(() => store.breadCrumbsTitle || route.meta.navName);
  * back control
  */
 const showBack = computed(() => route.meta.showBack);
+
+const hiddenBoxShadow = computed(() => route.meta.hiddenBoxShadow);
+
 const handleBack = () => {
   const { back } = window.history.state;
   if (back) {
@@ -75,4 +78,8 @@ const handleBack = () => {
       margin-right: 4px;
     }
   }
+
+  .hidden-box-shadow {
+    box-shadow: none !important;
+  }
 </style>

src/pages/src/components/layouts/MainView.vue

@@ -14,7 +14,9 @@
           class="main-container__view user-scroll-y user-scroll-x"
           :class="[{
             'pd-24': mainViewStore.hasPadding,
-            'has-breadcrumbs': !mainViewStore.customBreadcrumbs
+            'has-breadcrumbs': !mainViewStore.customBreadcrumbs,
+            'has-alert': userStore.showAlert,
+            'overflow-hidden': hiddenBoxShadow,
           }]">
           <RouterView />
         </div>
@@ -23,18 +25,22 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"> import { computed } from 'vue';
 import MainBreadcrumbs from './MainBreadcrumbs.vue';
 
-import { useMainViewStore, useMenu } from '@/store';
+import { useRoute } from 'vue-router';
+import { useMainViewStore, useMenu, useUser } from '@/store';
 const menuStore = useMenu();
 const mainViewStore = useMainViewStore();
+const userStore = useUser();
+const route = useRoute();
+
+const hiddenBoxShadow = computed(() => route.meta.hiddenBoxShadow);
 </script>
 
 <style lang="less">
 .main-container {
   display: flex;
-  height: calc(100vh - 52px);
 }
 
 .main-container-content {
@@ -50,10 +56,20 @@ const mainViewStore = useMainViewStore();
   background-color: #f5f7fa;
 
   &.has-breadcrumbs {
-    height: calc(100% - 52px);
+    height: calc(100vh - 104px);
   }
 }
 
+.has-alert {
+  &.has-breadcrumbs {
+    height: calc(100vh - 144px);
+  }
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .main-menu {
   position: relative;
   z-index: 101;

src/pages/src/router/index.ts

@@ -68,6 +68,7 @@ export default createRouter({
             routeParentName: 'setting',
             navName: t('跨租户协同'),
             isMenu: true,
+            hiddenBoxShadow: true,
           },
           component: () => import('@/views/setting/cross-tenant-collaboration/index.vue'),
         },

src/pages/src/router/router.d.ts

@@ -8,6 +8,7 @@ declare module 'vue-router' {
     navName?: string, // 设置面包屑 name
     isMenu?: boolean, // 判断是否为 bk-menu 导航，若是则不显示返回按钮
     showBack?: boolean, // 用于判断是否显示面包屑返回按钮
+    hiddenBoxShadow?: boolean, // 是否隐藏 box-shadow
   }
 }
 

src/pages/src/store/user.ts

@@ -7,10 +7,14 @@ export const useUser = defineStore('user', {
       username: '',
       avatar_url: '',
     },
+    showAlert: false, // 消息通知显示状态
   }),
   actions: {
     setUser(user: IUser) {
       this.user = user;
     },
+    setShowAlert(status: boolean) {
+      this.showAlert = status;
+    },
   },
 });

src/pages/src/views/Header.vue

@@ -3,7 +3,7 @@
     <!-- 消息通知 -->
     <NoticeComponent :api-url="apiUrl" @show-alert-change="showAlertChange" />
     <bk-navigation
-      :class="['main-navigation', { 'has-alert': showAlert}]"
+      :class="['main-navigation', { 'has-alert': userStore.showAlert }]"
       :hover-width="240"
       navigation-type="top-bottom"
       :need-menu="false"
@@ -137,7 +137,7 @@ import '@blueking/release-note/dist/vue3-light.css';
 import { logout } from '@/common/auth';
 import I18n, { t } from '@/language/index';
 import router from '@/router';
-import { useUser } from '@/store/user';
+import { useUser } from '@/store';
 import { logoConvert } from '@/utils';
 import { getVersionLogs } from '@/http';
 
@@ -227,12 +227,9 @@ const feedbackUrl = window.BK_USER_FEEDBACK_URL;
 // 消息通知配置信息
 const apiUrl = `${window.AJAX_BASE_URL}/api/v1/web/notices/announcements/`;
 
-// 是否含有跑马灯类型公告
-const showAlert = ref(false);
-
 // 公告列表change事件回调
 const showAlertChange = (isShow: boolean) => {
-  showAlert.value = isShow;
+  userStore.setShowAlert(isShow);
 };
 
 // 版本日志配置信息
@@ -260,10 +257,6 @@ const openVersionLog = async () => {
 <style lang="less" scoped>
 .has-alert {
   height: calc(100vh - 40px);
-
-  :deep(.bk-navigation-wrapper) {
-    height: calc(100vh - 92px) !important;
-  }
 }
 
 .main-navigation {
@@ -339,6 +332,7 @@ const openVersionLog = async () => {
 
     .container-content {
       padding: 0 !important;
+      overflow-y: hidden !important;
     }
   }
 

src/pages/src/views/setting/FieldSetting.vue

@@ -89,8 +89,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { bkTooltips as vBkTooltips, Message } from 'bkui-vue';
+<script setup lang="ts"> import { bkTooltips as vBkTooltips, Message } from 'bkui-vue';
 import InfoBox from 'bkui-vue/lib/info-box';
 import { inject, onMounted, reactive, ref } from 'vue';
 
@@ -248,7 +247,6 @@ const fetchFieldList = () => {
 
 <style lang="less" scoped>
 .field-setting-content {
-  height: calc(100vh - 104px);
   padding: 24px;
 
   .add-field {

src/pages/src/views/setting/LoginSetting.vue

@@ -330,7 +330,6 @@ const handleDataSource = () => {
 
 <style lang="less" scoped>
 .login-setting-wrapper {
-  height: calc(100vh - 104px);
   padding: 24px;
 
   .login-setting-content {