主题配置

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

系统默认的主题

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

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

配置当前主题

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

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

定义新的主题

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

主题编码

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

主题变量

在主题变量中定义 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 复制到主题变量中

主题类型

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

组件配置

在组件配置中配置组件的 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 复制到组件配置中

echarts 主题配置

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

从 echarts 官网主题构件工具导出主题的配置

在组件配置中增加 echarts 数组，内容是从 echarts 导出的主题配置

将主题配置中的 themeName 设置到 echarts 组件的外部主题属性上，即可使用该主题

样式配置

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

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

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

案例

自定义门户样式

1.在企业门户下，添加“统一通用配置”下“主题配置V2”设置项，新增主题，并在“样式配置”下新增样式内容，具体修改样式参考下面内容（需要删除注释并进行压缩）

.uix-portal-layout{
    header.uix-portal-layout-header{
        //修改顶部菜单样式
        background: url(./images/demo1.png) no-repeat  center center ;
        // 修改顶部菜单按钮样式
        .ant-menu-item.ant-menu-item-selected{
            background-color: rgba(100,100,100,0.5);
            border-radius: 5px;
        }
    }
    //修改中部内容模块样式
    .uix-portal-layout-bg-list{
        background: url(./images/demo1.png) no-repeat  center center ;
    }
    //修改左边菜单模块样式
    aside.ant-layout-sider.uix-portal-sider{
        margin-left: 5px;
        border-top-left-radius: 10px;
        background: linear-gradient(#ffffff, #f5f5f5 28%);
    }
    //修改右边内容模块样式
    main.uix-portal-layout-content{
        width: calc(100% - 5px);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background: linear-gradient(#ffffff, #f5f5f5 28%);
    }   
    //兼容左边没有菜单的情况
    aside.ant-layout-sider.uix-portal-sider + div.uix-portal-layout-container{
        main.uix-portal-layout-content{
            border-top-left-radius: 0px;
        }
    }    
}    
//修改顶部更多子菜单按钮样式
.ant-menu-submenu.ant-menu-submenu-popup{
    .ant-menu-item.ant-menu-item-selected.uix-portal-base-menu-horizontal-menu-item{
        background-color: var(--ant-menu-color-item-bg-selected);
        border-radius: 5px;
    }
}

2.完成上面配置后再在“统一通用配置”下新增“当前主题V2”配置项，并选择上面定义的主题，保存设置后刷新页面即可生效

配置案例

门户颜色修改案例

门户是通过 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"
        }
    }
}

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