针对开放平台，动态显示隐藏被嵌入网站的元素。

  1. node 添加配置文件 style-rules.yml，定义组件-样式映射关系如下：

    1
2
3
4

    # 收藏夹
navCollection: ".cmp.nav-collection"
# 企业申请入口
navEnterprise: ".cmp.nav-enterprice"

  2. java 后端组件的开关到对应的开放平台 id，并在用户信息中一并返回，返回格式如下：

    1
2
3
4
5
6
7
8

    {
...,
userStyles:{
    navCollection: true,
    navEnterprise: false
},
...
}

  3. 前端页面添加动态 css 样式链接

    1

    <link rel="stylesheet" type="text/css" href="(host)/css/dynamic" />

  4. node 端读取配置文件 style-rules.yml，拼接文本，返回 text/css 格式

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

    // 针对合作用户，返回动态的定制样式
router.get("/style/dynamic", (req, res) => {
let cssText = "div{}";
const userInfo = session.getUserInfo(req);
const isOpfUser = session.isOpfUser(req);
if (userInfo && isOpfUser) {
let _cssText = "";
// 挑选出需要隐藏的元素
for (const [key, isShow] of Object.entries(userInfo.styleRules || {})) {
  const selector = styleRules[key];
  if (selector && !isShow) {
    _cssText += `${selector},`;
  }
}
// 组装隐藏样式
_cssText && (cssText = _cssText.slice(0, -1) + "{display:none !important}");
}
res.setHeader("Content-Type", "text/css;charset=UTF-8");
res.status(200).send(cssText);
});