feat: footer 信息支持从环境配置中获取

env.py

@@ -113,6 +113,8 @@
 # 获取 PaaS 注入的蓝鲸域名
 BKPAAS_BK_DOMAIN = os.getenv("BKPAAS_BK_DOMAIN", "") or os.getenv("BK_DOMAIN", "")
 
+# PaaS 注入的蓝鲸共享资源域名
+BKPAAS_SHARED_RES_URL = os.getenv("BKPAAS_SHARED_RES_URL", "")
 
 # 获取加密类型
 BKPAAS_BK_CRYPTO_TYPE = (

frontend/desktop/package.json

@@ -15,6 +15,7 @@
     "@blueking/crypto-js-sdk": "0.0.5",
     "@blueking/login-modal": "^1.0.1",
     "@blueking/notice-component-vue2": "^2.0.1",
+    "@blueking/platform-config": "^1.0.2",
     "@blueking/user-selector": "^1.0.5-beta.2",
     "@vue/babel-preset-jsx": "^1.3.0",
     "ajv": "^6.10.2",

frontend/desktop/src/App.vue

@@ -109,7 +109,7 @@
                 this.handleRouteChange(id)
             }
         },
-        created () {
+        async created () {
             window.msg_list = []
             bus.$on('showLoginModal', args => {
                 const { has_plain, login_url, width, height, method } = args
@@ -166,7 +166,8 @@
                     })
                 })
             }
-            this.getPageFooter()
+            await this.getPageFooter()
+            this.getGlobalConfig()
             window.addEventListener('message', this.messageHandler, false)
         },
         mounted () {
@@ -176,7 +177,9 @@
             ...mapActions([
                 'getPermissionMeta',
                 'queryUserPermission',
-                'getFooterContent'
+                'getFooterContent',
+                'getFooterInfo',
+                'getGlobalConfig'
             ]),
             ...mapActions('appmaker/', [
                 'loadAppmakerDetail'
@@ -202,7 +205,7 @@
                 'setProjectConfig'
             ]),
             ...mapMutations([
-                'setPageFooter',
+                'setFooterInfo',
                 'setAdminPerm',
                 'setStatisticsPerm'
             ]),
@@ -281,12 +284,11 @@
             async getPageFooter () {
                 try {
                     this.footerLoading = true
-                    const resp = await this.getFooterContent()
+                    const resp = await this.getFooterInfo()
                     if (resp.result) {
-                        this.setPageFooter(resp.data)
+                        this.setFooterInfo(resp.data)
                     }
                 } catch (e) {
-                    this.setPageFooter(`<div class="copyright"><div>蓝鲸智云 版权所有</div></div>`)
                     console.log(e)
                 } finally {
                     this.footerLoading = false

frontend/desktop/src/api/index.js

@@ -86,11 +86,14 @@ axios.interceptors.response.use(
                         bus.$emit('createSnapshot', true) // 创建模板快照
                     }
 
-                    const successUrl = `${window.location.origin}${window.SITE_URL}static/bk_sops/login_success.html`
-                    let [loginUrl] = data.login_url.split('?')
-                    loginUrl = `${loginUrl}?c_url=${encodeURIComponent(successUrl)}`
-
-                    showLoginModal({ loginUrl })
+                    // 退出登录接口不打开登录弹框
+                    if (response.config.url.indexOf('/logout') === -1) {
+                        const successUrl = `${window.location.origin}${window.SITE_URL}static/bk_sops/login_success.html`
+                        let [loginUrl] = data.login_url.split('?')
+                        loginUrl = `${loginUrl}?c_url=${encodeURIComponent(successUrl)}`
+
+                        showLoginModal({ loginUrl })
+                    }
                 }
                 break
             case 499:

frontend/desktop/src/assets/html/index.html

@@ -52,6 +52,10 @@
         var BK_DOMAIN = '{{BK_DOMAIN}}';
         var BK_PAAS_ESB_HOST = '{{BK_PAAS_ESB_HOST}}'
         var TASK_LIST_STATUS_FILTER_DAYS = {{TASK_LIST_STATUS_FILTER_DAYS}}
+        var LOGIN_URL = '{{LOGIN_URL}}'
+        var BK_PAAS_SHARED_RES_URL = '{{BK_PAAS_SHARED_RES_URL}}'
+        var APP_NAME = '{{APP_NAME}}'
+        var RUN_VER_NAME = '{{RUN_VER_NAME}}'
         // 是否开启通知中心
         var ENABLE_NOTICE_CENTER = {{ENABLE_NOTICE_CENTER}}
         function getCookie(name) {

frontend/desktop/src/components/layout/CopyrightFooter.vue

@@ -10,7 +10,12 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <footer id="page-footer-wrapper" v-html="footer"></footer>
+    <footer id="page-footer-wrapper">
+        <p class="link-list" v-html="platformInfo.i18n.footerInfoHTML"></p>
+        <p class="copyright" v-if="footerInfo.year">
+            {{ `Copyright © ${footerInfo.year} Tencent BlueKing. All Rights Reserved. ${footerInfo.sops_version}` }}
+        </p>
+    </footer>
 </template>
 <script>
     import { mapState } from 'vuex'
@@ -19,7 +24,8 @@
         name: 'CopyrightFooter',
         computed: {
             ...mapState({
-                footer: state => state.footer
+                footerInfo: state => state.footerInfo,
+                platformInfo: state => state.platformInfo
             })
         }
     }
@@ -34,18 +40,15 @@
         text-align: center;
     }
     .link-list {
+        text-align: center;
         margin-bottom: 6px;
+        font-size: 12px;
     }
     .link-item {
         display: inline-block;
-        margin-left: -4px;
         padding: 0 4px;
         line-height: 1;
         color: #3480fe;
-        border-right: 1px solid #3480fe;
-        &:last-child {
-            border-right: none;
-        }
     }
     .desc {
         margin-bottom: 8px;

frontend/desktop/src/components/layout/Navigation.vue

@@ -1,13 +1,13 @@
 <template>
     <bk-navigation
         navigation-type="left-right"
-        :side-title="$t('标准运维')"
+        :side-title="platformInfo.name"
         :need-menu="true"
         :class="$route.name === 'taskList' ? 'hide-header-border' : ''"
         :default-open="sideNavOpen"
         @toggle="toggleSideNav">
         <div slot="side-icon" class="logo-area">
-            <img :src="logo" class="logo" />
+            <img :src="platformInfo.appLogo || logo" class="logo" />
         </div>
         <template slot="header">
             <div class="header-title">{{ title }}</div>
@@ -98,6 +98,7 @@
         },
         computed: {
             ...mapState({
+                platformInfo: state => state.platformInfo,
                 hasAdminPerm: state => state.hasAdminPerm,
                 hasStatisticsPerm: state => state.hasStatisticsPerm,
                 app_id: state => state.app_id,

frontend/desktop/src/components/layout/NavigatorHeadRight.vue

@@ -154,6 +154,7 @@
         },
         methods: {
             ...mapActions([
+                'logout',
                 'queryNewVersion',
                 'getVersionList',
                 'getVersionDetail'
@@ -230,9 +231,16 @@
             reloadHome () {
                 this.reload()
             },
-            handleLogout () {
-                const newUrl = window.location.origin + (window.SITE_URL || '/') + 'logout'
-                window.location.replace(newUrl)
+            async handleLogout () {
+                try {
+                    await this.logout()
+                } catch (error) {
+                    console.warn(error)
+                } finally {
+                    let loginUrl = window.LOGIN_URL
+                    loginUrl = /\/$/.test(loginUrl) ? loginUrl : `${loginUrl}/`
+                    window.location.replace(`${loginUrl}?is_from_logout=1&c_url=${window.location.href}`)
+                }
             }
         }
     }

frontend/desktop/src/config/i18n/cn.js

@@ -1794,7 +1794,13 @@ const cn = {
     'exFailedText_调用日志': '调用日志',
     '任务还未执行，暂无执行历史': '任务还未执行，暂无执行历史',
     '空分支': '空分支',
-    '代理人仅可设置为本人': '代理人仅可设置为本人'
+    '代理人仅可设置为本人': '代理人仅可设置为本人',
+    '技术支持': '技术支持',
+    '社区论坛': '社区论坛',
+    '产品官网': '产品官网',
+    '联系bk助手': '联系bk助手',
+    '蓝鲸桌面': '蓝鲸桌面',
+    '蓝鲸': '蓝鲸'
 }
 
 export default cn

frontend/desktop/src/config/i18n/en.js

@@ -1828,7 +1828,13 @@ const en = {
     'exFailedText_调用日志': 'call log',
     '任务还未执行，暂无执行历史': 'Task not executed, no history available.',
     '空分支': 'Empty branch',
-    '代理人仅可设置为本人': 'The agent can only be set as yourself.'
+    '代理人仅可设置为本人': 'The agent can only be set as yourself.',
+    '技术支持': 'Technical Support',
+    '社区论坛': 'Community Forum',
+    '产品官网': 'Product Website',
+    '联系bk助手': 'Contact BK Assistant',
+    '蓝鲸桌面': 'BlueWhale Desktop',
+    '蓝鲸': 'BlueKing'
 }
 
 export default en

frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue

@@ -222,7 +222,6 @@
     import axios from 'axios'
     import tools from '@/utils/tools.js'
     import { TASK_STATE_DICT, NODE_DICT } from '@/constants/index.js'
-    import dom from '@/utils/dom.js'
     import TemplateCanvas from '@/components/common/TemplateCanvas/index.vue'
     import ModifyParams from './ModifyParams.vue'
     import ExecuteInfo from './ExecuteInfo.vue'
@@ -237,6 +236,7 @@
     import TemplateData from './TemplateData'
     import injectVariableDialog from './InjectVariableDialog.vue'
     import tplPerspective from '@/mixins/tplPerspective.js'
+    import { setShortcutIcon } from '@blueking/platform-config'
 
     const CancelToken = axios.CancelToken
     let source = CancelToken.source()
@@ -403,6 +403,7 @@
         },
         computed: {
             ...mapState({
+                platformInfo: state => state.platformInfo,
                 view_mode: state => state.view_mode,
                 hasAdminPerm: state => state.hasAdminPerm,
                 infoBasicConfig: state => state.infoBasicConfig,
@@ -2376,32 +2377,31 @@
             },
             // 根据当前任务的状态修改页面对应浏览器tab的icon
             modifyPageIcon () {
-                let nameSuffix = ''
+                let namePrefix = ''
                 switch (this.state) {
                     case 'CREATED':
-                        nameSuffix = 'created'
+                        namePrefix = 'created'
                         break
                     case 'FINISHED':
-                        nameSuffix = 'finished'
+                        namePrefix = 'finished'
                         break
                     case 'FAILED':
                     case 'REVOKED':
-                        nameSuffix = 'failed'
+                        namePrefix = 'failed'
                         break
                     case 'RUNNING':
                     case 'READY':
-                        nameSuffix = 'running'
+                        namePrefix = 'running'
                         if (this.tabIconState === 'SUSPENDED') {
-                            nameSuffix = 'suspended'
+                            namePrefix = 'suspended'
                         }
                         break
                     case 'SUSPENDED':
                     case 'NODE_SUSPENDED':
-                        nameSuffix = 'suspended'
+                        namePrefix = 'suspended'
                 }
-                const picName = nameSuffix ? `bk_sops_${nameSuffix}` : 'bk_sops'
-                const path = `${window.SITE_URL}static/core/images/${picName}.png`
-                dom.setPageTabIcon(path)
+                const picName = namePrefix ? `${namePrefix}Img` : 'bk_sops'
+                setShortcutIcon(this.platformInfo[picName])
             },
             // 下次画布组件更新后执行队列
             onTemplateCanvasMounted () {

frontend/desktop/src/store/index.js

@@ -14,18 +14,34 @@ import Vuex from 'vuex'
 import modules from './modules/index.js'
 import axios from 'axios'
 import i18n from '@/config/i18n/index.js'
+import { getPlatformConfig, setShortcutIcon } from '@blueking/platform-config'
 
 Vue.use(Vuex)
 
 const getAppLang = () => {
     return getCookie('blueking_language') === 'en' ? 'en' : 'zh-cn'
 }
 
+const getStateFavicon = () => {
+    const states = ['failed', 'finished', 'running', 'created', 'suspended']
+    return states.reduce((acc, cur) => {
+        acc[`${cur}Img`] = `${window.SITE_URL}static/core/images/bk_sops_${cur}.png`
+        return acc
+    }, { favicon: `${window.SITE_URL}static/core/images/bk_sops.png` })
+}
+
 const store = new Vuex.Store({
     strict: process.env.NODE_ENV !== 'production',
     state: {
         username: window.USERNAME,
-        footer: '',
+        footerInfo: {},
+        platformInfo: { // 项目全局配置
+            bkAppCode: window.APP_CODE,
+            name: window.APP_NAME || i18n.t('标准运维'),
+            brandName: window.RUN_VER_NAME || i18n.t('蓝鲸'),
+            ...getStateFavicon(),
+            i18n: {}
+        },
         hasAdminPerm: null, // 是否有管理员查看权限
         hasStatisticsPerm: null, // 是否有运营数据查看权限
         hideHeader: window.HIDE_HEADER === 1,
@@ -59,8 +75,11 @@ const store = new Vuex.Store({
         setAppId (state, id) {
             state.app_id = id
         },
-        setPageFooter (state, content) {
-            state.footer = content
+        setFooterInfo (state, content) {
+            state.footerInfo = content
+        },
+        setPlatformInfo (state, content) {
+            state.platformInfo = content
         },
         setAdminPerm (state, perm) {
             state.hasAdminPerm = perm
@@ -219,6 +238,49 @@ const store = new Vuex.Store({
          */
         getIamUrl ({ commit }, data) {
             return axios.post('iam/api/apply_perms_url/', data).then(response => response.data)
+        },
+        // 退出登录
+        logout () {
+            return axios.get('logout').then(response => response.data)
+        },
+        getFooterInfo () {
+            return axios.get('core/footer_info/').then(response => response.data)
+        },
+        /**
+         * 获取当前用户的全局设置
+         * @returns {Object}
+         */
+        async getGlobalConfig ({ state, commit }) {
+            const { bk_tencent_url, env, smart_url, sops_version, tech_support_url, bk_helper_url, bk_desktop_url } = state.footerInfo
+            // 默认配置
+            const config = {
+                ...state.platformInfo,
+                version: sops_version
+            }
+
+            if (env) {
+                config.i18n.footerInfoHTML = `
+                    <a target="_blank" class="link-item" href="${tech_support_url}">${i18n.t('技术支持')}</a>
+                    | <a target="_blank" class="link-item" href="${smart_url}">${i18n.t('社区论坛')}</a>
+                    | <a target="_blank" class="link-item" href="${bk_tencent_url}">${i18n.t('产品官网')}</a>
+                `
+            } else {
+                config.i18n.footerInfoHTML = `
+                    <a target="_blank" class="link-item" href="${bk_helper_url}">${i18n.t('联系bk助手')}</a>
+                    | <a target="_blank" class="link-item" href="${bk_desktop_url}">${i18n.t('蓝鲸桌面')}</a>
+                `
+            }
+            let resp
+            const bkRepoUrl = `${window.BK_PAAS_SHARED_RES_URL}/bk_sops/base.js`
+            if (bkRepoUrl) {
+                resp = await getPlatformConfig(bkRepoUrl, config)
+            } else {
+                resp = await getPlatformConfig(config)
+            }
+            document.title = `${resp.name} | ${resp.brandName}`
+            setShortcutIcon(resp.favicon)
+            commit('setPlatformInfo', resp)
+            return resp
         }
     },
     modules