# 显示风格及 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>
为领域模型的名称,如User
、Role
、Permission
等。<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
2
3
4
5
6
7
8
9
<fieldName>
为字段的名称,如name
、description
、email
等。