门户V2主题配置

门户V2支持配置主题，通过配置主题呈现不同的界面效果，如下面两幅图所示

1 系统默认的主题

上面两幅图对应的两个主题，都是系统默认的主题，系统默认有5个主题，分别是：theme、theme_bluedark、theme_dark、theme_compact和theme_compact_dark。

第一幅图是theme主题的效果，第二幅图是theme_bluedark主题的效果。

2 配置当前主题

系统默认使用的主题是theme，在统一通用配置中添加当前主题current-theme配置，设置当前使用的主题。

在统一按组织配置中添加当前主题current-theme配置，可以实现不同组织使用不同的主题。

3 定义新的主题

一个主题由主题编码、主题名称、主题类型、主题变量、组件配置和样式配置五部分组成。在统一通用配置中添加主题配置theme-config，可以配置多个主题。

3.1 主题编码

主题编码以theme_开头，例如：theme_1

3.2 主题变量

在主题变量中定义Design Token，例如：

    {
        "colorPrimaryText": "#c3dcf1",
        "colorTextBase": "#c3dcf1",
        "colorPrimaryBg": "#00000000 !important",
        "colorLink": "#00d4ff",
        "colorPrimaryBorder": "#1677ff",
        "colorBgBase": "#062d43"
    }

打开ide，切换到页面设计页，点击右上角的齿轮图标显示下拉菜单，点击主题变量菜单，打开主题变量编辑对话框，如下图所示

• 主题管理：增加新的主题
• 主题列表：切换编辑的主题
• 主题类型：全局用来配置Design Token，组件用来配置组件的Class
• 主题配置：配置后生成JSON
• 保存：写入UI2/pcx/configContext.js文件

选择主题类型为全局，配置后，点击主题配置，将token里面的JSON复制到主题变量中

3.3 主题类型

主题类型定义主题允许在桌面端和（或）移动端使用。

3.4 组件配置

在组件配置中配置组件的Token和Class。对于echarts组件来说，在这里配置echarts的主题，例如：

    {
        "Menu": {
            "itemSelectedColor": "rgb(0, 212, 255)"
        },
        "echarts":[{
            "version": 1,
            "themeName": "theme8",
            "theme": {
                "seriesCnt": "8",
                "backgroundColor": "rgba(0, 0, 0, 0)"
            }
        }]
    }

选择主题类型为组件，配置后，点击主题配置，将components里面的JSON复制到组件配置中

3.4 echarts主题配置

echarts的主题也在组件配置中配置

• 从echarts官网主题构件工具导出主题的配置
• 在组件配置中增加echarts数组，内容是从echarts导出的主题配置
• 将主题配置中的themeName设置到echarts组件的外部主题属性上，即可使用该主题

3.5 样式配置

在样式配置中配置非组件的Class和用iframe嵌入的页面的样式，注意value部分是字符串。例如：

    {
        "*": "
            .x-scroll-content{
                color:red
            }
        ",
        "iframe路径匹配": "
            body{
                color: red;
            }
        "
    }

• 在*里面定义非组件样式
• 在iframe路径匹配中写入iframe的src的部分路径，系统匹配后会施加里面的样式到iframe页面中

4 门户颜色修改案例

门户是通过ProLayout组件展现的，调整门户的颜色就是调整ProLayout组件的Token。调整后效果如下图所示

在统一通用配置中，添加主题配置。

在组件配置中，添加如下代码

{
    "ProLayout": {
        "header": {
            "colorBgHeader": "#ffffffff !important",
            "colorHeaderTitle": "#3494F8",
            "colorTextMenu": "#000000",
            "colorTextRightActionsItem": "#000000"
        },
        "sider": {
            "colorMenuBackground":"#3494F8",
            "colorTextMenu": "#fff",
            "colorTextMenuSelected": "rgb(0, 212, 255)",
            "colorTextMenuItemHover": "#fff"
        }
    }
}

在统一通用配置中，添加当前主题，选中上面新添加的主题，保存后，刷新浏览器即可看到调整颜色后的效果

ProLayout组件提供的Token清单，请参考ProLayout组件官网