feat: 前端接入消息通知中心

luofann · Jan 24, 2024 · 3cd4ad3 · 3cd4ad3
1 parent abea185
commit 3cd4ad3
Show file tree

Hide file tree

Showing 15 changed files with 150 additions and 16 deletions.
diff --git a/frontend/pc/index.html b/frontend/pc/index.html
@@ -35,6 +35,7 @@
             window.TAM_PROJECT_ID = "{{TAM_PROJECT_ID}}";
             window.DEFAULT_PROJECT = "{{DEFAULT_PROJECT}}";
             window.BK_PAAS_ESB_HOST = "{{BK_PAAS_ESB_HOST}}";
+            window.NOTICE_CENTER_SWITCH = "{{NOTICE_CENTER_SWITCH}}";
         </script>
         <script>
             var isMobileDevice = false;

diff --git a/frontend/pc/package.json b/frontend/pc/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@blueking/bkcharts": "^2.0.6",
     "@blueking/bkui-form": "0.0.31",
+    "@blueking/notice-component-vue2": "^2.0.1",
     "@blueking/user-selector": "^1.0.5-beta.2",
     "@toast-ui/editor-plugin-code-syntax-highlight": "^1.0.0",
     "@toast-ui/vue-editor": "^2.4.0",

diff --git a/frontend/pc/src/App.vue b/frontend/pc/src/App.vue
@@ -22,11 +22,11 @@
 
 <template>
   <div id="app" class="bk-app" @click="hiddenTree" v-bkloading="{ isLoading: loading }">
+    <notice-component v-if="showNotice && !$route.meta.iframe" :api-url="apiUrl" @show-alert-change="handleNoticeChange" />
     <template v-if="isShowView">
       <!-- has navigation-->
-      <navigation v-if="!$route.meta.iframe">
+      <navigation v-if="!$route.meta.iframe" :class="{ 'show-notice': showNotice }">
         <div
-          v-if="isShowView"
           v-bkloading="{ isLoading: localLoading }"
           class="bk-app-content">
           <permissionApply
@@ -42,6 +42,7 @@
       </navigation>
       <!-- no navigation-->
       <template v-else>
+        <!-- ddd -->
         <div
           v-if="isShowView"
           v-bkloading="{ isLoading: localLoading }"
@@ -62,15 +63,20 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
+  import NoticeComponent from '@blueking/notice-component-vue2';
+  import '@blueking/notice-component-vue2/dist/style.css';
   import bus from './utils/bus';
   import Navigation from './components/common/layout/Navigation.vue';
   import PermissionModal from '@/components/common/modal/PermissionModal.vue';
   import permissionApply from '@/components/common/layout/permissionApply.vue';
   import permission from '@/mixins/permission.js';
   import { errorHandler } from './utils/errorHandler';
+
   export default {
     name: 'app',
     components: {
+      NoticeComponent,
       Navigation,
       PermissionModal,
       permissionApply,
@@ -88,13 +94,17 @@
         isRouterAlive: true,
         permissinApplyShow: false,
         routerKey: +new Date(),
+        apiUrl: `//${window.location.host}/notice/announcements/`,
         permissionData: {
           type: 'project', // 无权限类型: project、other
           permission: [],
         },
       };
     },
     computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
       routerTable() {
         return this.$store.state.tableList;
       },
@@ -319,6 +329,9 @@
           clearInterval(this.$store.state.deployOrder.intervalInfo.timeOut);
         }
       },
+      handleNoticeChange(isShow) {
+        this.$store.commit('setNoticeShow', isShow);
+      },
     },
   };
 </script>
@@ -338,6 +351,18 @@
         width: 100%;
         .bk-navigation {
             min-width: 1366px;
+            &.show-notice {
+              height: calc(100vh - 40px);
+            //   overflow: hidden;
+              .bk-navigation-wrapper {
+                .container-content {
+                  max-height: calc(100vh - 92px) !important;
+                }
+                .nav-slider-list {
+                  height: calc(100vh - 148px) !important;
+                }
+              }
+            }
             .navigation-container {
                 max-width: unset!important;
             }

diff --git a/frontend/pc/src/store/index.js b/frontend/pc/src/store/index.js
@@ -123,6 +123,7 @@ export default new Vuex.Store({
   // 公共 store
   state: {
     language: "zh-cn",
+    showNotice: window.NOTICE_CENTER_SWITCH === 'on',
     // 任务执行后刷新任务记录列表
     taskHistoryRefresh: false,
     // 缓存人员选择器数据
@@ -272,6 +273,9 @@ export default new Vuex.Store({
     setLanguage(state, value) {
       state.language = value;
     },
+    setNoticeShow(state, value) {
+      state.showNotice = value;
+    },
     /**
      * 更新当前用户 user
      *

diff --git a/frontend/pc/src/views/home/index.vue b/frontend/pc/src/views/home/index.vue
@@ -22,7 +22,7 @@
 
 <template>
   <div class="home-page-wrapper">
-    <div class="home-page-view">
+    <div :class="['home-page-view', { 'show-notice': showNotice }]">
       <div class="home-background">
         <p class="welcome-tips">Hi，{{ userName }}，{{ $t(`m.home['欢迎使用流程服务！']`) }}</p>
       </div>
@@ -35,6 +35,7 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
   import ServiceList from './serviceList.vue';
   // import TicketTable from './ticketTable.vue';
   import CopyrightFooter from '@/components/common/layout/CopyrightFooter.vue';
@@ -51,11 +52,22 @@
         userName: window.username || '--',
       };
     },
+    computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
+    },
   };
 </script>
 <style lang="scss" scoped>
     .home-page-view {
         min-height: calc(100vh - 52px);
+        &.show-notice {
+            min-height: calc(100vh - 92px);
+            .main-content {
+                min-height: calc(100vh - 287px);
+            }
+        }
     }
     .home-background {
         height: 160px;

diff --git a/frontend/pc/src/views/operation/home.vue b/frontend/pc/src/views/operation/home.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-  <div class="operation-home" ref="operationHome">
+  <div :class="['operation-home', { 'show-notice': showNotice }]" ref="operationHome">
     <div class="date-selector" :class="{ 'selector-fixed': isDateSelectorFixed }">
       <bk-date-picker
         type="daterange"
@@ -193,6 +193,7 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
   import dayjs from 'dayjs';
   import throttle from 'lodash/throttle';
   import SummaryCard from './components/summaryCard.vue';
@@ -492,6 +493,11 @@
         },
       };
     },
+    computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
+    },
     created() {
       this.getSummaryData();
       this.getDetailData();
@@ -836,7 +842,8 @@
         this.getDetailData();
       },
       scrollHandler(e) {
-        this.isDateSelectorFixed = e.target.scrollTop > 150;
+        const gap = this.showNotice ? 110 : 150;
+        this.isDateSelectorFixed = e.target.scrollTop > gap;
       },
       handleServiceSearch(val) {
         this.serviceSearchStr = val || undefined;
@@ -913,6 +920,11 @@
     .operation-home {
         position: relative;
         padding: 20px 20px 60px;
+        &.show-notice {
+          .date-selector.selector-fixed {
+              top: 92px;
+          }
+        }
     }
     .date-selector {
         position: absolute;

diff --git a/frontend/pc/src/views/operation/service.vue b/frontend/pc/src/views/operation/service.vue
@@ -44,7 +44,7 @@
         </bk-select>
       </div>
     </div>
-    <div class="section-content">
+    <div :class="['section-content', { 'show-notice': showNotice }]">
       <div class="date-selector" :class="{ 'selector-fixed': isDateSelectorFixed }">
         <bk-date-picker
           type="daterange"
@@ -119,6 +119,7 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
   import dayjs from 'dayjs';
   import throttle from 'lodash/throttle';
   import SummaryCard from './components/summaryCard.vue';
@@ -295,6 +296,9 @@
       };
     },
     computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
       serviceName() {
         const service = this.serviceList.find(item => item.id === this.serviceId);
         return service ? service.name : '--';
@@ -454,7 +458,8 @@
         this.getDetailData();
       },
       scrollHandler(e) {
-        this.isDateSelectorFixed = e.target.scrollTop > 150;
+        const gap = this.showNotice ? 110 : 150;
+        this.isDateSelectorFixed = e.target.scrollTop > gap;
       },
       onAddedTicketDimensionChange(val) {
         this.addedTicketChartDismension = val;
@@ -514,7 +519,13 @@
         position: relative;
         height: calc(100vh - 104px );
         padding: 20px 20px 60px;
-        overflow: auto
+        overflow: auto;
+        &.show-notice {
+          height: calc(100vh - 144px );
+          .date-selector.selector-fixed {
+            top: 102px;
+          }
+        }
     }
     .date-selector {
         position: absolute;

diff --git a/frontend/pc/src/views/project/index.vue b/frontend/pc/src/views/project/index.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-  <div class="project-page" v-bkloading="{ isLoading: projectDetailLoading }">
+  <div :class="['project-page', { 'show-notice': showNotice }]" v-bkloading="{ isLoading: projectDetailLoading }">
     <router-view v-if="$store.state.project.id && !projectDetailLoading"></router-view>
   </div>
 </template>
@@ -41,6 +41,7 @@
     computed: {
       ...mapState({
         projectListLoading: state => state.project.projectListLoading,
+        showNotice: state => state.showNotice,
       }),
     },
     watch: {
@@ -96,5 +97,8 @@
 <style lang="scss" scoped>
     .project-page {
         height: calc(100vh - 52px);
+        &.show-notice {
+            height: calc(100vh - 92px);
+        }
     }
 </style>
diff --git a/frontend/pc/src/views/service/editService/ServiceFormStep.vue b/frontend/pc/src/views/service/editService/ServiceFormStep.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-  <div class="service-form" :class="{ 'hide-field-option': !showFieldOption }">
+  <div class="service-form" :class="{ 'show-notice': showNotice, 'hide-field-option': !showFieldOption }">
     <!-- 字段选择 -->
     <div :class="['field-option', isShowField ? 'field-hide' : '']">
       <div style="overflow: hidden; height: 100%;">
@@ -184,6 +184,7 @@
 </template>
 
 <script>
+  import { mapState } from 'vuex';
   import { errorHandler } from '../../../utils/errorHandler.js';
   import commonMix from '../../commonMix/common.js';
   import { deepClone } from '../../../utils/util.js';
@@ -292,6 +293,9 @@
       };
     },
     computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
       catalogDisplayName() {
         return this.serviceInfo.bounded_catalogs ? this.serviceInfo.bounded_catalogs.join('/') : '';
       },
@@ -844,6 +848,12 @@
             width: 100%;
         }
     }
+    &.show-notice {
+        height: calc(100vh - 204px);
+        .field-option {
+            height: calc(100vh - 204px);
+        }
+    }
     .field-hide {
         border-right: 0px solid #dde4eb !important;
         width: 0 !important;

diff --git a/frontend/pc/src/views/service/editService/index.vue b/frontend/pc/src/views/service/editService/index.vue
@@ -46,7 +46,7 @@
                 @step-changed="onStepChange">
             </bk-steps>
         </div> -->
-    <div :class="['steps-content', { 'steps-content-height': isShowNodeConfig }]" v-bkloading="{ isLoading: serviceLoading || flowInfoLoading }">
+    <div :class="['steps-content', { 'show-notice': showNotice, 'steps-content-height': isShowNodeConfig }]" v-bkloading="{ isLoading: serviceLoading || flowInfoLoading }">
       <template v-if="!serviceLoading && !flowInfoLoading">
         <service-form-step v-if="currStep === 1"
           ref="serviceFormStep"
@@ -93,6 +93,7 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
   import NavTitle from '@/components/common/layout/NavTitle';
   import ServiceFormStep from './ServiceFormStep.vue';
   import ServiceProcessStep from './ServiceProcessStep.vue';
@@ -132,6 +133,9 @@
       };
     },
     computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
       currStep() {
         const routeMap = ['basic', 'process', 'setting'];
         const index = routeMap.indexOf(this.step);
@@ -338,6 +342,9 @@
     height: calc(100vh - 164px);
     overflow: auto;
     @include scroller;
+    &.show-notice {
+        height: calc(100vh - 204px);
+    }
 }
 .steps-content-height {
     height: calc(100vh - 165px);