feat: 平台信息配置

# Reviewed, transaction id: 11969

frontend/index-dev.html

@@ -22,7 +22,7 @@
               const GLOBAL_TASK_CONFIG_PERMISSION = 'True'
               const GLOBAL_SETTING_PERMISSION = 'True'
               const USE_IAM = 'True'
-              const APP_CODE = 'bk_nodeman'
+              const APP_CODE = 'bkc-nodeman'
               const WXWORK_UIN = ''
               const DESTOP_URL = ''
               const BKAPP_NODEMAN_CALLBACK_URL = ''
@@ -42,6 +42,7 @@
               const BKAPP_NAV_HELPER_URL = ''
               const ENABLE_AP_VERSION_MUTEX = 'False'
               const ENABLE_NOTICE_CENTER = 'False'
+              const BKPAAS_SHARED_RES_URL  = ''
 
               return {
                   SITE_URL: SITE_URL,
@@ -79,6 +80,7 @@
                   BKAPP_NAV_HELPER_URL,
                   ENABLE_AP_VERSION_MUTEX,
                   ENABLE_NOTICE_CENTER,
+                  BKPAAS_SHARED_RES_URL,
               }
           })()
           window.$DHCP = window.PROJECT_CONFIG.BKAPP_ENABLE_DHCP === 'True'

frontend/index.html

@@ -46,6 +46,7 @@
               const BKAPP_NAV_OPEN_SOURCE_URL = '{{ BKAPP_NAV_OPEN_SOURCE_URL }}'
               const ENABLE_AP_VERSION_MUTEX = '{{ ENABLE_AP_VERSION_MUTEX }}'
               const ENABLE_NOTICE_CENTER = '{{ ENABLE_NOTICE_CENTER }}'
+              const BKPAAS_SHARED_RES_URL = '{{ BKPAAS_SHARED_RES_URL }}'
 
               return {
                   APP_CODE,
@@ -65,6 +66,7 @@
                   DESTOP_URL,
                   ENABLE_AP_VERSION_MUTEX,
                   ENABLE_NOTICE_CENTER,
+                  BKPAAS_SHARED_RES_URL,
                   GLOBAL_TASK_CONFIG_PERMISSION,
                   GLOBAL_SETTING_PERMISSION,
                   GSE_LISTEN_PORT,

frontend/package.json

@@ -47,6 +47,7 @@
     "@blueking/login-modal": "^1.0.1",
     "@blueking/notice-component-vue2": "~2.0.1",
     "@blueking/paas-login": "0.0.9",
+    "@blueking/platform-config": "^1.0.3",
     "@icon-cool/bk-icon-node-manager": "latest",
     "axios": "0.26.1",
     "bk-magic-vue": "2.5.6",

frontend/src/App.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 <script lang="ts">
-import { MainStore } from '@/store/index';
+import { MainStore, PlatformConfigStore } from '@/store/index';
 import { bus } from '@/common/bus';
 import NodemanNavigation from '@/components/common/navigation.vue';
 import PermissionModal from '@/components/auth/PermissionModal.vue';
@@ -25,6 +25,7 @@ import BkPaasLogin from '@blueking/paas-login/dist/paas-login.umd';
 import NoticeComponent from '@blueking/notice-component-vue2';
 import '@blueking/notice-component-vue2/dist/style.css';
 import { showLoginModal } from '@blueking/login-modal';
+import { setDocumentTitle, setShortcutIcon  } from '@blueking/platform-config';
 
 @Component({
   name: 'app',
@@ -78,7 +79,13 @@ export default class App extends Vue {
     MainStore.setSelectedBiz(selectedBiz);
   }
 
-  private created() {
+  private async created() {
+    // 获取平台配置信息
+    await PlatformConfigStore.getConfig();
+    // 设置网页标题
+    setDocumentTitle(PlatformConfigStore.defaults.i18n);
+    // 设置favicon
+    setShortcutIcon(PlatformConfigStore.defaults.favicon);
     const platform = window.navigator.platform.toLowerCase();
     if (platform.indexOf('win') === 0) {
       this.systemCls = 'win';

frontend/src/components/common/footer.vue

@@ -1,26 +1,27 @@
 <template>
   <footer class="footer">
-    <p class="footer-link" v-if="link.length">
-      <span v-for="(item, index) in link" :key="index" class="footer-link-list">
-        <a :href="item.href" :target="item.target" class="footer-link-item">
-          {{ item.name }}
-        </a>
-      </span>
-    </p>
+    <p
+      class="footer-link"
+      v-html="config.i18n.footerInfoHTML"
+    ></p>
     <p class="footer-copyright">
-      {{ $t('蓝鲸版权', { year: new Date().getFullYear(), version: version }) }}
+      {{ config.footerCopyrightContent }}
     </p>
   </footer>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from 'vue-property-decorator';
+import { PlatformConfigStore } from '@/store/index';
 
 @Component({ name: 'nm-footer' })
 
 export default class NmFooter extends Vue {
   private link: { name: string, href: string, target?: string }[] = [];
-
+  private get config() {
+    return PlatformConfigStore.defaults;
+  }
+  
   private created() {
     this.version =  window.PROJECT_CONFIG.VERSION;
     if (window.PROJECT_CONFIG.BKAPP_RUN_ENV === 'ieod') {

frontend/src/components/common/navigation.vue

@@ -13,8 +13,8 @@
       @toggle-click="handleNavToggle">
       <!--icon-->
       <div slot="side-header" class="nav-header" @click="$router.push('/')">
-        <img src="../../images/logoIcon.png" class="nodeman-logo-icon" />
-        <span class="title-desc">{{ nav.headerTitle }}</span>
+        <img :src="appLogo" class="nodeman-logo-icon" />
+        <span class="title-desc">{{ config.i18n.name }}</span>
       </div>
       <!--顶部导航-->
       <template #header>
@@ -123,7 +123,7 @@
   </article>
 </template>
 <script lang="ts">
-import { MainStore } from '@/store/index';
+import { MainStore, PlatformConfigStore } from '@/store/index';
 import { Component, Ref, Mixins, Watch } from 'vue-property-decorator';
 import NavSideMenu from '@/components/common/nav-side.vue';
 import LogVersion from '@/components/common/log-version.vue';
@@ -210,6 +210,12 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
     cloudManagerDetail: window.i18n.t('查看管控区域权限'),
   };
 
+  private get config() {
+    return PlatformConfigStore.defaults;
+  }
+  private get appLogo() {
+    return PlatformConfigStore.defaults.appLogo;
+  }
   private get navList() {
     return MainStore.navList.filter(item => !item.disabled);
   }
@@ -489,6 +495,7 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
   .nodeman-logo-icon {
     width: 28px;
     height: 28px;
+    background: v-bind(appLogo) no-repeat 0 center;
   }
   .nav-header {
     display: flex;

frontend/src/store/index.ts

@@ -9,6 +9,7 @@ import pluginNew from '@/store/modules/plugin-new';
 import pluginOld from '@/store/modules/plugin';
 import task from '@/store/modules/task';
 import config from '@/store/modules/config';
+import platformConfig from '@/store/modules/platform-config';
 
 
 Vue.use(Vuex);
@@ -24,6 +25,7 @@ const store = new Vuex.Store({
     task,
     config,
     main,
+    platformConfig,
   },
 });
 
@@ -68,6 +70,7 @@ const PluginStore = getModule(pluginNew, store);
 const PluginOldStore = getModule(pluginOld, store);
 const TaskStore = getModule(task, store);
 const ConfigStore = getModule(config, store);
+const PlatformConfigStore = getModule(platformConfig, store);
 
 export {
   MainStore,
@@ -77,6 +80,7 @@ export {
   PluginOldStore,
   TaskStore,
   ConfigStore,
+  PlatformConfigStore,
 };
 
 export default store;

frontend/src/store/modules/platform-config.ts

@@ -0,0 +1,69 @@
+import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';
+import { IPlatformConfig } from '@/types/config/config';
+import { getPlatformConfig } from '@blueking/platform-config';
+import logoSrc from '@/images/logoIcon.png';
+
+// eslint-disable-next-line new-cap
+@Module({ name: 'platformConfig', namespaced: true })
+export default class PlatformConfigStore extends VuexModule {
+  public defaults: IPlatformConfig =  {
+    bkAppCode: '', // appcode
+    name: '', // 站点的名称，通常显示在页面左上角，也会出现在网页title中
+    nameEn: '', // 站点的名称-英文
+    appLogo: '', // 站点logo
+    favicon: '/static/images/favicon.png', // 站点favicon
+    helperText: '',
+    helperTextEn: '',
+    helperLink: '',
+    brandImg: '',
+    brandImgEn: '',
+    brandName: '', // 品牌名，会用于拼接在站点名称后面显示在网页title中
+    favIcon: '',
+    brandNameEn: '', // 品牌名-英文
+    footerInfo: '', // 页脚的内容，仅支持 a 的 markdown 内容格式
+    footerInfoEn: '', // 页脚的内容-英文
+    footerCopyright: '', // 版本信息，包含 version 变量，展示在页脚内容下方
+
+    footerInfoHTML: '',
+    footerInfoHTMLEn: '',
+    footerCopyrightContent: '',
+    version: '',
+
+    // 需要国际化的字段，根据当前语言cookie自动匹配，页面中应该优先使用这里的字段
+    i18n: {
+      name: '',
+      helperText: '...',
+      brandImg: '...',
+      brandName: '...',
+      footerInfoHTML: '...',
+    },
+  };
+  /**
+  * 获取远程配置
+  * @param {*} param0
+  */
+
+  @Mutation
+  public updatePlatformConfig(value: IPlatformConfig) {
+    Object.assign(this.defaults, value);
+  }
+
+  @Action
+  public async getConfig() {
+    const url = `${window.PROJECT_CONFIG?.BKPAAS_SHARED_RES_URL}/bk_nodeman/base.js`
+    const config = await getPlatformConfig(url, {
+      name: '蓝鲸节点管理',
+      nameEn: 'NodeMan',
+      appLogo: logoSrc,
+      brandName: '腾讯蓝鲸智云',
+      brandNameEn: 'BlueKing',
+      favicon: '/static/images/favicon.png',
+      helperLink: window.PROJECT_CONFIG.BKAPP_NAV_HELPER_URL,
+      helperText: window.i18n.t('联系BK助手'),
+      version: window.PROJECT_CONFIG.VERSION,
+    });
+    console.log("🚀 ~ PlatformConfigStore ~ getConfig ~ config:", config)
+
+    this.context.commit('updatePlatformConfig', config);
+  }
+}

frontend/src/types/config/config.ts

@@ -94,3 +94,37 @@ export interface IAvailable {
   callback_url?: string
   outer_callback_url?: string
 }
+
+// 平台信息配置
+export interface IPlatformConfig {
+  bkAppCode: string, // appcode
+  name: string, // 站点的名称，通常显示在页面左上角，也会出现在网页title中
+  nameEn: string, // 站点的名称-英文
+  appLogo: string, // 站点logo
+  favicon: string, // 站点favicon
+  helperText: string,
+  helperTextEn: string,
+  helperLink: string,
+  brandImg: string,
+  brandImgEn: string,
+  brandName: string, // 品牌名，会用于拼接在站点名称后面显示在网页title中
+  favIcon: string,
+  brandNameEn: string, // 品牌名-英文
+  footerInfo: string, // 页脚的内容，仅支持 a 的 markdown 内容格式
+  footerInfoEn: string, // 页脚的内容-英文
+  footerCopyright: string, // 版本信息，包含 version 变量，展示在页脚内容下方
+
+  footerInfoHTML: string,
+  footerInfoHTMLEn: string,
+  footerCopyrightContent: string,
+  version: string,
+
+  // 需要国际化的字段，根据当前语言cookie自动匹配，页面中应该优先使用这里的字段
+  i18n: {
+    name: string,
+    helperText: string,
+    brandImg: string,
+    brandName: string,
+    footerInfoHTML: string,
+  },
+};