feat: 前端接入消息通知中心 (#2908)

TencentBlueKing · Jan 19, 2024 · 65b81fd · 65b81fd
1 parent f3e4e5e
commit 65b81fd
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 9 deletions.
diff --git a/bcs-services/bcs-bscp/ui/package.json b/bcs-services/bcs-bscp/ui/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@blueking/notice-component": "^2.0.1",
     "@types/js-cookie": "^3.0.2",
     "@types/lodash.clonedeep": "^4.5.7",
     "axios": "^0.27.2",

diff --git a/bcs-services/bcs-bscp/ui/src/App.vue b/bcs-services/bcs-bscp/ui/src/App.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="page-content-container">
+    <notice-component v-if="showNotice" :api-url="noticeApiURL" @show-alert-change="showNotice = $event" />
     <Header></Header>
-    <div class="content">
+    <div :class="['content', { 'show-notice': showNotice }]">
       <router-view></router-view>
       <permission-dialog :show="showApplyPermDialog"></permission-dialog>
     </div>
@@ -14,13 +15,18 @@ import { storeToRefs } from 'pinia';
 import useGlobalStore from './store/global';
 import useUserStore from './store/user';
 import isCrossOriginIFrame from './utils/is-cross-origin-iframe';
+import NoticeComponent from '@blueking/notice-component'
+import '@blueking/notice-component/dist/style.css'
 import Header from './components/head.vue';
 import PermissionDialog from './components/permission/apply-dialog.vue';
 
 const userStore = useUserStore();
 const globalStore = useGlobalStore();
 const { showLoginModal } = storeToRefs(userStore);
-const { showApplyPermDialog } = storeToRefs(globalStore);
+const { showApplyPermDialog, showNotice } = storeToRefs(globalStore);
+
+// @ts-ignore
+const noticeApiURL = `${window.BK_BCS_BSCP_API}/api/v1/announcements`
 
 watch(
   () => showLoginModal.value,
@@ -34,12 +40,15 @@ watch(
 );
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .page-content-container {
   min-width: 1366px;
   overflow: auto;
 }
 .content {
   height: calc(100vh - 52px);
+  &.show-notice {
+    height: calc(100vh - 92px);
+  }
 }
 </style>
diff --git a/bcs-services/bcs-bscp/ui/src/api/index.ts b/bcs-services/bcs-bscp/ui/src/api/index.ts
@@ -93,6 +93,12 @@ export const updateApp = (params: any) => {
  */
 export const permissionCheck = (params: { resources: IPermissionQueryResourceItem[] }) => http.post('/auth/iam/permission/check', params).then(resp => resp.data);
 
+/**
+ * 获取消息通知信息
+ * @returns
+ */
+export const getNotice = () => http.get('/announcements').then(resp => resp.data);
+
 /**
  * 退出登录
  * @returns

diff --git a/bcs-services/bcs-bscp/ui/src/components/layout-top-bar.vue b/bcs-services/bcs-bscp/ui/src/components/layout-top-bar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-top-bar">
+  <div :class="['layout-top-bar', { 'show-notice': showNotice }]">
     <section class="layout-top-section">
       <slot name="head"></slot>
     </section>
@@ -12,8 +12,13 @@
 </template>
 
 <script setup lang="ts">
-</script>
 
+import { storeToRefs } from 'pinia';
+import useGlobalStore from '../store/global';
+
+const { showNotice } = storeToRefs(useGlobalStore());
+
+</script>
 
 <style lang="scss" scoped>
 .layout-top-bar {
@@ -22,6 +27,9 @@
   background: #f5f7fa;
   height: calc(100vh - 52px);
   width: 100%;
+  &.show-notice {
+    height: calc(100vh - 92px);
+  }
 
   .layout-top-section {
     height: 52px;

diff --git a/bcs-services/bcs-bscp/ui/src/store/global.ts b/bcs-services/bcs-bscp/ui/src/store/global.ts
@@ -8,6 +8,8 @@ export default defineStore('global', () => {
   const spaceId = ref(''); // 空间id
   const spaceFeatureFlags = ref<{ [key: string]: boolean; }>({}); // 空间的配置开关
   const spaceList = ref<ISpaceDetail[]>([]);
+  // @ts-ignore
+  const showNotice = ref(window.BSCP_CONFIG.ENABLE_BK_NOTICE || false); // 是否展示消息通知
   const showApplyPermDialog = ref(false); // 资源无权限申请弹窗
   const showPermApplyPage = ref(false); // 无业务查看权限时，申请页面
   const applyPermUrl = ref(''); // 跳转到权限中心的申请链接
@@ -21,6 +23,7 @@ export default defineStore('global', () => {
     spaceId,
     spaceFeatureFlags,
     spaceList,
+    showNotice,
     showApplyPermDialog,
     showPermApplyPage,
     applyPermUrl,

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/groups/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/groups/index.vue
@@ -446,7 +446,7 @@ const goGroupDoc = () => window.open(BSCP_CONFIG.group_doc);
 }
 .group-table-wrapper {
   :deep(.bk-table-body) {
-    max-height: calc(100vh - 200px);
+    max-height: calc(100vh - 240px);
     overflow: auto;
   }
 }

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/components/detail-layout.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/components/detail-layout.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="script-detail-layout">
+  <section :class="['script-detail-layout', { 'show-notice': showNotice }]">
     <header>
       <div class="nav-title">
         <ArrowsLeft class="arrow-icon" @click="emits('close')" />
@@ -16,6 +16,10 @@
 </template>
 <script setup lang="ts">
 import { ArrowsLeft } from 'bkui-vue/lib/icon';
+import { storeToRefs } from 'pinia';
+import useGlobalStore from '../../../../store/global';
+
+const { showNotice } = storeToRefs(useGlobalStore());
 
 const props = withDefaults(defineProps<{
     name: string;
@@ -35,6 +39,10 @@ const emits = defineEmits(['close']);
     height: calc(100vh - 52px);
     background: #ffffff;
     z-index: 2000;
+    &.show-notice {
+      top: 92px;
+      height: calc(100vh - 92px);
+    }
     .nav-title {
       display: flex;
       align-items: center;

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/components/version-layout.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/components/version-layout.vue
@@ -1,5 +1,5 @@
 <template>
-  <section :class="['version-layout-container', { 'without-footer': !showFooter }]">
+  <section :class="['version-layout-container', { 'show-notice': showNotice, 'without-footer': !showFooter }]">
     <section class="layout-header">
       <slot name="header"></slot>
     </section>
@@ -12,6 +12,11 @@
   </section>
 </template>
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import useGlobalStore from '../../../../../../store/global';
+
+const { showNotice } = storeToRefs(useGlobalStore());
+
 withDefaults(
   defineProps<{
     showFooter?: boolean;
@@ -31,6 +36,13 @@ withDefaults(
   height: calc(100vh - 52px);
   background: #ffffff;
   z-index: 2000;
+  &.show-notice {
+    top: 92px;
+    height: calc(100vh - 92px);
+    &.without-footer {
+      height: calc(100vh - 88px);
+    }
+  }
   &.without-footer {
     .layout-content {
       height: calc(100% - 48px);

diff --git a/bcs-services/bcs-bscp/ui/src/vite-env.d.ts b/bcs-services/bcs-bscp/ui/src/vite-env.d.ts
@@ -12,4 +12,6 @@ declare module '*.md' {
   export default Component;
 }
 
-declare module 'markdown-it'
+declare module 'markdown-it';
+
+declare module '@blueking/notice-component';