显示主题

系统提供了 DynamicTheme 对象，用于在不修改前端代码的情况下定制界面的品牌元素和整体风格，包括页面标题、Logo、网站图标、主题色与布局，以及登录后的首页。

目标读者

本文档的目标读者为：本系统的开发和实施人员

维护主题

主题在菜单 开发配置 > 界面显示 > 显示主题 中维护。系统内置一个名为"默认风格"的主题，下图为编辑"默认风格"的界面：

字段	说明
名称（name）	主题名称，唯一，创建后不可修改
描述（description）	说明
页面标题（title）	左上角的系统名称和登录页标题，例如"牧言低代码开发平台演示系统"
收藏图标（favicon）	浏览器标签页上的网站图标
Logo（logo）	左上角的 Logo
方形 Logo（squareLogo）	登录页上显示的 Logo
主题配置（themeSettings）	JSON，界面布局与主题色配置，见下文
首页（landingPage）	登录后首页显示的表单（DynamicForm）。编辑表单中没有该字段，需通过 CSV 或数据 API 设置（CSV 列名为 landingPage.name，填表单的名称，下方的默认表头中没有这一列，需要时自行添加）；为空时显示系统默认首页
背景图片（backgroundImage）	当前版本前端不使用该字段
CSS 定义（css）	当前版本前端不加载该字段中的样式
SSO 启用逻辑（ssoEnableLogic）	当前版本前端不使用该字段

编辑表单的分组标题（Basic Information、Images、Logics）目前显示为英文。

CSV 种子数据的表头如下（(F) 表示该列的值为文件路径，平台读取文件内容导入）：

name(*),description,css(F),active,title,squareLogo,favicon,backgroundImage,logo,themeSettings(F)

主题配置（themeSettings）

themeSettings 是一个 JSON 对象，前端把它合并到 Ant Design Pro 布局（ProLayout）的配置中，其中的 token 合并到 Ant Design 的主题 token 中。可用的键请参考 ProLayout 文档 (opens new window) 与 Ant Design 定制主题 (opens new window)。"默认风格"的配置如下：

{
  "pwa": true,
  "token": {},
  "layout": "mix",
  "navTheme": "light",
  "colorWeak": false,
  "components": {},
  "fixSiderbar": true,
  "fixedHeader": false,
  "colorPrimary": "#1890ff",
  "contentWidth": "Fluid"
}

常用的键：

键	说明
layout	布局方式：side（侧边菜单）、top（顶部菜单）、mix（混合）
navTheme	菜单主题：light、realDark
colorPrimary	主色
fixSiderbar / fixedHeader	是否固定侧边栏 / 顶栏
contentWidth	内容区宽度：Fluid（流式）、Fixed（定宽，仅 top 布局有效）
token	Ant Design 主题 token，例如 {"colorPrimary": "#00b96b", "borderRadius": 4}

激活主题

同时只能有一个主题生效。在主题列表中展开某个主题行末的下拉菜单，点击"激活"，在确认框中点击"确定"即可使其生效，该动作要求当前用户具有 DEVELOPER 角色。确认框目前显示为英文（标题 Active，内容为 "Active theme(s)? active theme will be shown in UI"）。

某个主题生效后，内置的对象客制化（DynamicTheme:afterUpdate、DynamicTheme:afterCreate）会自动把其他主题标记为不生效。因此通过 CSV 种子数据或数据 API 新建、保存一个 active 为 true 的主题，效果与点击"激活"相同。

前端通过无需登录的接口 GET /theme/info（路径省略了 /api 前缀，见 地址前缀）读取当前生效主题的标题、图片地址、首页和 themeSettings，刷新页面后即可看到新主题的效果。

1.0 起已移除按表单、字段注入 CSS 选择器的定制方式（界面风格请通过 themeSettings 调整）。