使用说明

1.设置topBar参数配置(可选,未配置则以下配置作为默认配置,建议用户侧项目不需要配置

    
      // topBarOptions 的默认配置,可以在加载topbar.js 之前定义好这些参数
      window.topBarOptions= {
        // 不需要强制登录的路由
        whiteList: ['/login', '/register', '/404'],
        // 单点登录类型,sso:门户侧SSO登录,cecloud-inc:运营侧SSO登录
        ssoType: 'sso', // ['sso','cecloud-inc'],
        // 是否显示地区选择
        showAreaSelect:true
      }
    
  

2.引入js

方式一:html中引入js

    
    // 开发环境引入
    <script src="//topbar.wh001.dev.cecloud.com/cecloud-topbar-v1.1.0.js"></script>
    // 测试环境引入
    <script src="//topbar.wh001.test.cecloud.com/cecloud-topbar-v1.1.0.js"></script>
    // 预发环境引入
    <script src="//topbar.wh001.pre.cecloud.com/cecloud-topbar-v1.1.0.js"></script>
    // 生产环境引入
    <script src="//topbar.cecloud.com/cecloud-topbar-v1.1.0.js"></script>
    
  

方式二:vue项目可以使用脚手架集成topbar(推荐使用该方式)

推荐使用脚手架命令行创建新项目,详见: https://www.npmjs.com/package/bean-sprouts-cli
推荐使用微服务脚手架(子项目)搭建开发环境,
详见: https://code.cestc.cn/cestc-tcfe1/bean-sprouts/-/tree/micro-sub
注意:分支号为 micro-sub

交互api说明

1. topbar 抛出的事件

监听地区选择事件(地区选择初始化时也会触发该回调)

    
      // 方式一:
      window.addEventListener('areaSelect', function (e) {
        // e.detail 中包含选择的地区信息
        console.log('areaSelect', e);
      })

      // 方式二:(推荐使用)
      window.onTopBarAreaChange((currentRegion) => {
      
/** baseDomain: 页面跳转使用的基础域名 baseUrl: 接口调用域名,后端服务需通过soul配置到对应的region收口域名下 cloudCode: 云编码,cecloud:公有云,cecstack:专有云,公有云与专有云可根据此字段做判断 cloudType: 底座信息,OPENSTACK:易捷,CCOS:CCOS disabled: 是否禁用 name: 名称 normalRegion: 是否普通region regionCode: region编码 */
console.log('currentRegion', currentRegion); // 将region信息存储在vuex中,并设置baseUrl this.$store.commit('app/SET_BASE_URL', currentRegion.baseUrl||'') this.$store.commit('app/SET_CURRENT_REGION', currentRegion) })

2. 地区选择控制

设置是否显示地区选择

    
      // 显示地区选择
       window.setTopbarAreaSelect({show:true})
      // 不显示地区选择
       window.setTopbarAreaSelect({show:false})
    
  

3. 获取地区选择的当前值

获取地区选择的当前值

        
          // 获取地区选择的当前值
          window.getTopBarArea().then((currentRegion)=>{
            console.log(currentRegion)
          })
        
      

4. 获取TopBar当前所有数据

获取TopBar当前所有数据

    
      // 获取TopBar当前所有数据
     var data = window.getTopBarData()
     console.log(data)
    
  

5. 调用topbar方法打开服务页面,新增历史服务访问记录,并返回访问列表的Promise

window.addTopBarRecord(consoleType):Promise

    
      // 调用topbar方法打开服务页面,新增历史服务访问记录,并返回访问列表的Promise
      window.addTopBarRecord('mail').then(res=>{
        console.log(res)
      })
    
  

6. 设置可用的region

window.setTopBarEnableRegions(regions):List

    
      // 设置topbar可用的region为数组中的region,其余的设为不可用,
      // 特殊的region也可直接放在数组中,如果当前的region不可用,会自动切换到可用region
      window.setTopBarEnableRegions(['cn-wuhan'])
    
  

7. 设置topbar的region

window.setTopBarRegion(region)

    
      // 设置当前region为武汉,如果传入region为空,则设置为cookie中的regionCode对应的region
      window.setTopBarRegion({regionCode:'cn-wuhan'})
    
  

8. 调用topBar的退出登录

window.topBarLogout()

    
      // 调用topBar的退出登录
      window.topBarLogout()
    
  

9. 调用topBar的当前用户信息

window.getTopBarUserInfo():Promise

    
      // 调用topBar的当前用户信息
      window.getTopBarUserInfo().then(userInfo=>{
        console.log(userInfo)
      })
    
  

10. 获取服务列表,并返回服务列表的Promise

window.getTopBarServerList():Promise

    
      // 获取服务列表,并返回服务列表的Promise
      window.getTopBarServerList().then(res=>{
        console.log(res)
      })
    
  

11. 设置topbar的 topBarOptions

window.setTopBarOptions(topBarOptions)

    
      // 设置topBarOptions
      window.setTopBarOptions({})
    
  

12. 设置topbar的 logoMenu

window.setTopBarLogoMenu(logoMenu)

    
      // 设置topbar的 logoMenu
      window.setTopBarLogoMenu({docName:'运维侧'})
    
  

13. 自定义topbar的 userMenuList

window.setTopBarUserMenuList(menus)

    
      // 设置topbar的 userMenuList
      window.getTopBarUserMenuList().then(menus => {
        menus.push({
          label: 'callback',
          title: '自定义菜单',
          callback: () => {
            alert('自定义菜单')
          }
        })
        menus.unshift({
          title: '自定义链接',
          url: '//cecloud.com'
        })
        window.setTopBarUserMenuList(menus)
      })
    
  

14. topBar提供一些工具类方法

window.topBarTool:Object

    
      // topBar提供一些工具类方法
      window.topBarTool
    
  

其他

公共 topbar 不进行统一下推的原因 为避免引起意向不到的问题,公共 topbar 不进行整体的 body 下推, 建议需要预留 48px 高度的区域 可能引起的问题: 如果 body 的一级子元素存在自己控制的样式, 会对此可能产生影响 如果 body 的一级子元素存在 内敛(inline) 样式, 下推样式可能失效 一个下推方案介绍

    
      .xxx {
        transform: translate(0, 48px);
      }