category: Components cols: 1 subtitle: 产品统一框架布局 type: Everest title: BasicLayout

框架布局

作者：荣陶胜

为什么要统一布局

应用屏嵌入iframe，产品共用一个头部，产品中需要移除头部，但是移动头部的同时，导致了产品布局顶端留白55px和侧滑框被应用屏头部遮盖了55px的问题
统一产品规范

第一步:

删除产品中 Layout.init(产品编号) 代码，加入获取最新头部js代码代理

"proxy": [{
  "context": ["/frontend/**"],
  "target": "http://newprod.dev.cn",
  "secure": false
}

若不添加代理或更新无法获取 window.USER_INFO_DATA window.USER_INFO window.UYUN_LANGUAGE对象

第二步:

使用BasicLayout组件替换产品中布局组件

安装:

$ npm i --save @uyun/ec-basic-layout

使用：

import BasicLayout from '@uyun/ec-basic-layout'
export default class CMDBLayout extends Component {
  render () {
    return (
      <BasicLayout
        sideMenu={{ items: items, Link: Link }} /** 参考 @uyun/ec-side-menu API 配置 */
      >
        <div>
          { /** 产品主体内容 */}
        </div>
      </BasicLayout>
    );
  }
}

组件需要的代理环境：

 "proxy": [{
    "context": [
      "/frontend/**" // newprod.dev.cn 环境是最新的 Layout-public.min.js
    ],
    "target": "http://newprod.dev.cn",
    "secure": false
  }, {
    "context": [
      "/tenant/**",  // 租户
      "/notify/**", // 头部消息接口
      "/portal/**" // 头部相关接口
    ],
    "target": "本地测试环境",
    "secure": false
  }]

若不添加代理头部将无法获取数据

第三步:

产品中出现以下场景：

跳转到某个产品
跳转到租户登录页面

使用了 window.location.href 或 location.href 修改成 window.UYUN_APPLICATION_SCREEN_VAR.location.href

例子

// 跳转到ant 产品
window.location.href = '/ant/history/executiveHistory'
// 修改成
window.UYUN_APPLICATION_SCREEN_VAR.location.href = '/ant/history/executiveHistory'

// 跳转到登录
window.location.href = '/tenant/#/login_admin/'
// 修改成
window.UYUN_APPLICATION_SCREEN_VAR.location.href = '/tenant/#/login_admin/'

第四步: 测试

添加布局后样式
手动删除头部，主体内容与侧边栏顶到顶部后样式
替换了window.UYUN_APPLICATION_SCREEN_VAR.location.href是否可以正常运行

生产环境中必须更新最新的头部代码 `Layout-public.min.js`

API

使用经过 BasicLayout 包装的组件 Api

参数	说明	类型	默认值
sideMenu	@uyun/ec-side-menu配置或 `() => <MySideMenu />`。不传表示没有侧边栏	`object \| func`	null
children	产品主体内容	node	null
productName	产品名称	string	null
contentStyle	产品主体内容style	string	null
contentClassName	产品主体内容className	object	null
header	提供给应用屏头部接口（产品中不需要配置）	BasicLayout.Header	null

注意对 @uyun/ec-side-menu 进行二次封装的， render外层不容许再次包裹标签

class MySideMenu extends Component {
  render () {
    //return <div><SideMenu /></div> // 不容许再次嵌套
    return <SideMenu />
  }
}

BasicLayout.Header

参数	说明	类型	默认值
changeSkin	切换皮肤	func	null
goHome	返回主页	func	null
data	各个产品信息	array	null
grid	布局	array	null
iconStyle	产品名称与信息交换位置	bool	null
renderLink	链接处理函数	func	null

嵌入应用屏

window.UYUN_APPLICATION_SCREEN_VAR

参数	说明	类型
location.href	获取地址，跳转	string
isInApplicationScreen	是否在应用屏中	bool
SUB_IFRAME_NAME	窗口id，一般就是产品名称。在应用屏的时候才会有	string

应用屏主要测试点

产品中出现 401，跳转到主窗口登录页面
产品中更换主题，要更换主窗口的主题以及其他被打开的产品主题
主窗口更换主题，要通知所有被打开的产品主题
产品列表中切换应用，动画形式切换应用

Current Tags

1.2.0-beta.33 ... beta (6 years ago)
1.2.0-beta.12 ... beta.12 (6 years ago)
1.2.0-beta.26 ... beta.26 (6 years ago)
2.0.0-dev.0 ... dev (3 years ago)
1.3.12 ... latest (5 years ago)

148 Versions

2.0.0-dev.0 ... 3 years ago
1.4.17 ... 3 years ago
1.4.16 ... 3 years ago
1.4.15 ... 3 years ago
2.0.0 ... 4 years ago
2.0.1 ... 4 years ago
1.4.13 ... 4 years ago
1.4.12 ... 4 years ago
1.4.11 ... 4 years ago
1.4.10 ... 4 years ago
1.4.9 ... 4 years ago
1.4.8 ... 4 years ago
1.4.2-alpha.25 ... 4 years ago
1.4.2-alpha.24 ... 4 years ago
1.4.7 ... 4 years ago
1.4.2-alpha.23 ... 4 years ago
1.4.2-alpha.22 ... 4 years ago
1.4.2-alpha.21 ... 4 years ago
1.4.2-alpha.20 ... 4 years ago
1.4.5 ... 4 years ago
1.4.4 ... 4 years ago
1.4.2-alpha.19 ... 4 years ago
1.4.2-alpha.18 ... 4 years ago
1.4.2 ... 4 years ago
1.4.2-alpha.17 ... 4 years ago
1.4.2-alpha.16 ... 4 years ago
1.4.2-alpha.15 ... 4 years ago
1.4.2-alpha.14 ... 4 years ago
1.4.2-alpha.13 ... 4 years ago
1.4.2-alpha.12 ... 4 years ago
1.4.2-alpha.11 ... 4 years ago
1.4.2-alpha.10 ... 4 years ago
1.4.2-alpha.9 ... 4 years ago
1.4.2-alpha.8 ... 4 years ago
1.4.2-alpha.7 ... 4 years ago
1.4.2-alpha.6 ... 4 years ago
1.4.2-alpha.5 ... 4 years ago
1.4.2-alpha.4 ... 4 years ago
1.4.2-alpha.3 ... 4 years ago
1.4.2-alpha.2 ... 4 years ago
1.4.2-alpha.1 ... 4 years ago
1.4.2-alpha.0 ... 4 years ago
1.4.1-alpha.0 ... 4 years ago
1.4.0-alpha.0 ... 4 years ago
1.3.23-alpha.0 ... 4 years ago
1.3.22 ... 4 years ago
1.3.22-alpha.0 ... 4 years ago
1.3.21-alpha.0 ... 4 years ago
1.3.20-alpha.0 ... 4 years ago
1.3.19-alpha.0 ... 4 years ago
1.3.18-alpha.0 ... 4 years ago
1.3.17-alpha.0 ... 4 years ago
1.3.16-alpha.0 ... 4 years ago
1.3.15 ... 4 years ago
1.3.13 ... 5 years ago
1.3.12 ... 5 years ago
1.3.11 ... 5 years ago
1.3.10 ... 5 years ago
1.3.9 ... 5 years ago
0.1.0 ... 6 years ago
0.1.1 ... 6 years ago
0.1.2 ... 6 years ago
0.1.3 ... 6 years ago
0.1.4 ... 6 years ago
0.1.5 ... 6 years ago
0.1.6 ... 6 years ago
0.1.7 ... 6 years ago
0.1.8 ... 6 years ago
0.1.9 ... 6 years ago
0.1.10 ... 6 years ago
0.1.11 ... 6 years ago
0.1.12 ... 6 years ago
0.1.13 ... 6 years ago
0.1.14 ... 6 years ago
0.1.15 ... 6 years ago
0.1.16 ... 6 years ago
0.1.17 ... 6 years ago
0.1.18 ... 6 years ago
0.1.19 ... 6 years ago
0.1.20 ... 6 years ago
1.0.0 ... 6 years ago
1.0.1 ... 6 years ago
0.1.21 ... 6 years ago
1.0.2 ... 6 years ago
0.1.22 ... 6 years ago
1.0.3 ... 6 years ago
0.1.23 ... 6 years ago
1.0.4 ... 6 years ago
0.1.24 ... 6 years ago
1.0.5 ... 6 years ago
1.0.6 ... 6 years ago
1.0.7 ... 6 years ago
1.0.8 ... 6 years ago
1.0.9 ... 6 years ago
1.0.10 ... 6 years ago
1.0.11 ... 6 years ago
1.0.13 ... 6 years ago
1.0.14 ... 6 years ago
1.0.15 ... 6 years ago
1.0.16-beta.1 ... 6 years ago
1.0.16 ... 6 years ago
1.1.0 ... 6 years ago
1.1.1 ... 6 years ago
1.1.2 ... 6 years ago
1.1.3 ... 6 years ago
1.1.4 ... 6 years ago
1.1.5 ... 6 years ago
1.1.6 ... 6 years ago
1.1.7 ... 6 years ago
1.2.0-beta.12 ... 6 years ago
1.2.0-beta.13 ... 6 years ago
1.2.0-beta.15 ... 6 years ago
1.2.0-beta.16 ... 6 years ago
1.2.0-beta.17 ... 6 years ago
1.2.0-beta.18 ... 6 years ago
1.2.0-beta.19 ... 6 years ago
1.2.0-beta.20 ... 6 years ago
1.2.0-beta.21 ... 6 years ago
1.2.0-beta.22 ... 6 years ago
1.2.0-beta.23 ... 6 years ago
1.2.0-beta.24 ... 6 years ago
1.2.0-beta.25 ... 6 years ago
1.2.0-beta.26 ... 6 years ago
1.2.0-beta.27 ... 6 years ago
1.2.0-beta.28 ... 6 years ago
1.2.0-beta.29 ... 6 years ago
1.2.0-beta.30 ... 6 years ago
1.2.0-beta.31 ... 6 years ago
1.2.0-beta.32 ... 6 years ago
1.2.0-beta.33 ... 6 years ago
1.2.0 ... 6 years ago
1.2.1 ... 6 years ago
1.2.2 ... 6 years ago
1.2.3 ... 6 years ago
1.3.0 ... 6 years ago
1.3.2 ... 6 years ago
1.3.3 ... 6 years ago
1.3.5 ... 6 years ago
1.3.6 ... 6 years ago
1.0.12 ... 6 years ago
1.0.16-beta.0 ... 6 years ago
1.2.2-beta.0 ... 6 years ago
1.2.0-beta.14 ... 6 years ago
1.3.1 ... 6 years ago
1.1.8 ... 6 years ago
1.3.4 ... 6 years ago
1.3.7 ... 6 years ago
1.3.8 ... 5 years ago