From 65b81fddae5ff9f90cb392be6b16f0f486a5a135 Mon Sep 17 00:00:00 2001
From: Luo Fan <44999219+luofann@users.noreply.github.com>
Date: Fri, 19 Jan 2024 10:57:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=8D=E7=AB=AF=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83=20(#2908?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bcs-services/bcs-bscp/ui/package.json             |  1 +
 bcs-services/bcs-bscp/ui/src/App.vue              | 15 ++++++++++++---
 bcs-services/bcs-bscp/ui/src/api/index.ts         |  6 ++++++
 .../bcs-bscp/ui/src/components/layout-top-bar.vue | 12 ++++++++++--
 bcs-services/bcs-bscp/ui/src/store/global.ts      |  3 +++
 .../bcs-bscp/ui/src/views/space/groups/index.vue  |  2 +-
 .../space/scripts/components/detail-layout.vue    | 10 +++++++++-
 .../detail/config/components/version-layout.vue   | 14 +++++++++++++-
 bcs-services/bcs-bscp/ui/src/vite-env.d.ts        |  4 +++-
 9 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/bcs-services/bcs-bscp/ui/package.json b/bcs-services/bcs-bscp/ui/package.json
index eddedbd214..dd02c1d971 100644
--- 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
index 6dec211547..caf7621044 100644
--- 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
index 715457b890..2038769150 100644
--- 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
index 35b5a5d6c5..daf9fdb73c 100644
--- 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
index 9a8a076f23..1605b50338 100644
--- 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
index c1e04299e1..aeee8d9398 100644
--- 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
index 0f4b17dba4..b2869cb97b 100644
--- 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
index 1226eac36d..29444192fb 100644
--- 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
index 7466121f5d..bb02683ff6 100644
--- 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';