# 显示风格及 SSO

系统提供了 DynamicTheme 对象,允许用户定制和扩展前台界面的显示风格,而无需修改 前台代码。通过 DynamicTheme,用户可以:

  • 上传并应用自定义 Logo、小型 Logo、Favicon 和登录背景图片等品牌化元素
  • 注入额外的CSS样式,覆盖或扩展系统默认样式
  • 配置单点登录(SSO)功能的启用逻辑

该对象包含以下几个与界面显示相关的字段:

字段 描述
css 用于定义额外的CSS样式规则,这些规则将在页面加载时应用。
logo 用于登录界面和左侧菜单展开时显示的logo图标。
squareLogo 用于左侧菜单收起时显示的小方块logo图标。
favicon 用于各个页面浏览器选项卡上显示的网站图标。
backgroundImage 用于登录界面的背景图片。
ssoEnableLogic 一段JavaScript代码,用于在前端判断是否启用单点登录(SSO)功能。

创建了 DynamicTheme 对象后,使用具有 developer 权限的用户登录,选中记录,执行 Active DynamicTheme Action 即可使其生效。

同时只能有一个激活生效的 DynamicTheme 对象,某一个 DynamicTheme 生效后,系统会自 动将所有其他 DynamicTheme 标记为不生效。

系统中针对每种类型的领域模型的每一种表单中的每个字段,都提供了独立的 css selector,因此用户可以通过 css 定制,实现对表单中的每个字段的样式定制。甚至可以 设计出与系统默认完全不同的视觉效果。

这种灵活性使得用户能够根据自己的品牌形象和设计要求,对表单进行个性化定制,从而提 升用户界面的整体美观性和用户体验。

# 表单 Css selector 说明

如下表所示,系统中的不同表单类型,对应的 css selector 有所不同。

表单类型 css selector
更新 .edit-modal-wrap .edit-<domainName>-modal-wrap edit-modal edit-<domainName>-model
只读详情页面 Update 表单的 css selector 之下的 .readonly-form
创建 .create-modal-wrap .create-<domainName>-modal-wrap .create-modal create-<domainName>-model
列表 list-table-container ${tableModeState}-table-container list-<domainName>-<tableModeState>-table-container
  • <domainName> 为领域模型的名称,如 UserRolePermission 等。
  • <tableModeState> 为表格的状态,其可选项包括
export type TableMode = "detail" | "finder" | "detail-drawer" | "simple-list" | "card-list" | "table-list";
1

# 字段 Css selector 说明

与具体字段绑定的 css selector 为 ant-form-item form-field-type-<fieldType> form-item-<fieldName>

作用域从大到小,分别为整个表单中的所有字段、某类型的字段、某名称的字段。

  • <fieldType> 为字段的类型, 可选项如下。
export type ColumnType = "id" | "string" | "text" | "integer" | "decimal" |
  "currency" | "percentage" | "datetime" | "date" | "boolean" | "tags" |
  "df_tags" | "df_multiple" | "df_single" | "df_radio" | "df_checkbox" |
  "object" | "code" | "httpMethod" | "roles" | "zz-client-action" | "document" |
  "array" | "int" | "cronExpression" | "staticField" | "updatedIds" |
  "stacktrace" | "password" | "series" | "lineChart" | "long" | "multiple" |
  "json" | "object_multiple" | "markdown" | "objectIds" | EnumTypes | "file" | "image" |
  "treeSelect" | "arrayDetail" | "ratings" | "tech_muyan_enterprisewiki_contract_Statistic" |
  "comments" | "groupedGrandChild" | "url" | "subTable";
1
2
3
4
5
6
7
8
9
  • <fieldName> 为字段的名称,如 namedescriptionemail 等。
Last Updated: 2024/9/13 15:41:28