Skip to content

GitLab

Closed
Created by zhoudanjie@zhoudanjieDeveloper

react-pc页面需要被其他项目加载时，这样适配

背景

saas后台的品牌中心相关页面，因为要在邻汇吧后台被加载，需要做页面显示适配。

毕竟没做过，看到需求时，对于这个显示兼容需要做哪些工作，心里还是挺没底的。难不难？会不会要加班很久？

目标

从开发完的结果来说，saas后台中页面是这样的，

46f365e648f785da0913f1191c8ad745

而在邻汇吧后台看到的是这样

85270c3fbfbfa85d4497b16d45fec78f

  • 通过两个项目中页面展示的比较，作为被加载页面，显示适配有三点
    • 1、隐藏左侧菜单栏
    • 2、隐藏顶部导航栏
    • 3、去掉页面主体内容的margin留白

实现思路

当页面被邻汇吧后台项目请求加载时，会加上query参数?source=lhb。以参数source来决定是否需要做相应的适配

具体修改场所

  • app.tsx文件中使用到的layout组件 当source参数符合时，隐藏左侧菜单、顶部导航栏、并修改页面主体内容的marginmargin为0。 具体修改会有些琐碎，并且随project会有差异。不再展开。 有需要的，可以参考saas-manage、或者lcn-web。

  • 需要被加载的页面 调整主体内容的高度， 比如是一个V2Container嵌套V2Table的列表页时，V2Container的style设定可以按是否被加载场合，这样来区分处理。

    正常展示与被加载时的高度差异为，顶部条高度48 + container上margin16 + container下margin16 = 80px

        /*
          减去高度设置90 = 顶部条高度48 + container上margin16 + container下margin16 + container上padding10；
          减去高度大于这个值，页面底部留白大于预期；
          减去高度小于这个值，页面底部留白小于预期，且页面右侧会出现不必要的滚动条；

          如果是作为外部加载页面，比如邻汇吧后台，不需要考虑顶部条高度48和container上下margin各16，则为10px
        */
        style={{ height: matchQuery(location.search, 'source') ? 'calc(100vh - 10px)' : 'calc(100vh - 90px)' }}
Edited by zhoudanjie