主题配置

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

图 0

图 1

系统默认的主题

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

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

配置当前主题

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

图 2

图 3

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

定义新的主题

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

主题编码

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

主题变量

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

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

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

图 4

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

图 5

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

图 6

图 14

主题类型

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

组件配置

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

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

图 8

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

图 9

图 15

echarts 主题配置

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

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

图 11

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

图 15

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

图 16

样式配置

直接使用 class，在样式配置中，key 使用 *，value 中写 class，注意 value 部分是字符串。例如：

{
    "*": ".x-scroll-content{color:red}"
}

在样式配置中，支持设置用内嵌打开的页面样式，如下图所示，系统使用 iframe 打开内嵌页面，样式配置不支持跨域的页面地址

1758011469782

样式配置写法如下，在 iframe 路径匹配中写入 iframe 的 src 的部分路径，系统匹配后会施加里面的样式到 iframe 页面中

{
    "iframe路径匹配": "body{color: red;}"
}

例如

{
    "/datart/": "body{background-color: #00000000 !important;}"
}

检查配置是否正确

配置后刷新浏览器，如果样式没有发生变化，打开浏览器的开发人员工具，在控制台中输入 getCurrentReactPage().configContext，如下图所示

  • currentTheme：当前主题编码
  • theme_xxx.token：主题变量
  • theme_xxx.components：组件配置
  • theme_xxx.style：样式配置

如果 theme_xxx 中的内容不对，说明主题配置中的 JSON 有问题，通过 JSON 格式化工具检查问题

1757989301486

如果主题配置正确，删除本地缓存 currentTheme，如下图所示，再刷新浏览器，此时会获取最新的主题配置

1757989346934

配置案例

主题色调整

主题色指系统的核心品牌色，用于突出显示重要元素（如按钮、标题、进度条等），具备高辨识度和视觉冲击力。系统默认的主题色为蓝色，如下图所示

1757985664169

系统支持配置为任意颜色，如下图所示

1757985771960

系统的主题色配置分为两个部分，一是配置门户的主题色，二是配置页面的主题色

门户主题色

门户是通过 ProLayout 组件展现的，在门户风格配置中配置主题色

1757986513863

选择一个主题色，门户顶部背景色、已打开页面导航栏的颜色就会立即改变

1757986544995

在屏幕左侧点击，即可关闭抽屉，同时系统提示是否保存配置，点击确定按钮

1757986728107

保存门户风格配置后，在统一通用配置中，自动生成“门户风格配置”，如下图所示

1757986821374

打开配置，可任意修改主题色

1757986884501

页面主题色

在统一通用配置中添加“主题配置”，如下图所示

1757988479167

添加一个新的主题，设置主题编码、主题名称、主题类型、主题变量（包括主题色 colorPrimary、信息色 colorInfo、链接色 colorLink），如下图所示

1757988551923

在统一通用配置中再添加“当前主题”，如下图所示

1757988654341

在当前主题中，选中前面添加的主题

1757988712410

点击确定按钮后，系统提示是否切换主题，点击确定按钮，界面自动刷新

1757988731399

界面后刷新，如下图所示

1757988771130

主题色调整完毕

左侧功能树颜色调整

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

图 20

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

图 18

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

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

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

图 19

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

图 17

顶部一级菜单+左侧功能树颜色调整

门户是通过 ProLayout 组件展现的，调整功能树的颜色就是调整 ProLayout 组件的 Token。ProLayout 组件提供的 Token 清单，请参考 ProLayout组件官网。调整后效果如下图所示

1757503637974

在统一通用配置中，添加“主题配置”，设置组件配置和样式配置，如下图所示

1757503805619

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

{
    "ProLayout": {
        "sider": {
        "colorMenuBackground": "#e6fffb",
        "colorBgMenuItemActive": "#36cfc9",
        "colorTextMenuItemHover": "#08979c",
        "colorBgMenuItemSelected": "#13c2c2",
        "colorBgCollapsedButton": "#b5f5ec"
        },
        "header": {
        "colorTextMenuSelected":"#08979c"
        }
    }
}

在样式配置中，添加如下代码

{"*":".pcx-page > .ant-menu-submenu-popup .ant-menu-sub{background-color:#13c2c2}.ant-menu-root.ant-menu-inline.ant-menu-light > .uix-portal-base-menu-inline-submenu > .ant-menu-sub.ant-menu-inline{background-color:transparent}"}

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

门户样式调整

图 21

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;
    }
}

图 22

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

图 23

表格当前行样式调整

表格组件的当前行样式，是由表格组件的 Token 控制的，调整后效果如下图所示

1730891627397

react

在“主题变量编辑”对话框中，找到表格组件的选中行背景色的 Token 名： rowSelectedBg，并设置颜色

从“主题配置”中复制 components 中的代码

粘贴到统一通用配置的主题配置中

运行效果如下图所示

vue

在“主题变量编辑”对话框中，找到表格组件的选中行背景色的 Token 名： controlItemBgActive，并设置颜色

1730890011672

1730890257364

1730890299143

从“主题配置”中复制 components 中的代码

1730890335944

粘贴到统一通用配置的主题配置中

1730890531377

运行时效果如下图所示

1730891627397

门户功能页签固定

门户功能区域默认采用流式布局，即当页面的高度超过屏幕高度时，门户整个功能区域出现滚动条，向下滚动后，功能页签超出屏幕显示范围。如果希望功能页签不随页面滚动，如下图所示，可通过定义一个主题实现

1752545009535

在统一通用配置中，添加主题配置和当前主题，如下图所示

1752545093101

在主题配置中，添加一个新的主题

1752545477416

输入主题编码（以 theme_ 开头）、主题名称、选择主题类型为桌面端

1752545127886

样式配置输入下面的代码，点击确定按钮，保存主题

{"*":".uix-portal-layout-content>.ant-tabs>.ant-tabs-content-holder{height: calc(100vh - 130px);overflow-x: hidden;overflow-y: auto;}"}

在当前主题中，桌面端主题选择上一步中添加的主题，如下图所示，刷新页面即可生效

1752545790695

results matching ""

    No results matching ""