Skip to content

页头与主题 ​

本页覆盖 页眉设计 与 主题设置:改页头 Logo/标题,以及主题色等外观。保存后刷新页面即可看到效果。

一、页头设置 ​

页头设置用于自定义系统顶部导航栏的功能元素,支持新增、编辑、删除页头项,可配置下拉菜单、功能按钮、权限显隐、点击执行逻辑,实现顶部导航灵活自定义。路由:/system-management/header-settings

loading-ag-790

1. 新增/编辑功能 ​

1.1 新增 ​

点击工具栏按钮【新增】打开表单,填写完成后点击【确定】保存成功后刷新列表可见,若隐藏开关未开启,刷新整个页面后,页头更新可见。

字段说明
名称功能名称,不显示到页头
标签页头显示的文本
英文标签英文模式下显示的文本
父级下拉子功能,选择父级功能模块
图标必填,用于页头显示的图标
样式页头显示该功能模式:文字、图标、组合
类型可选:头像、菜单、搜索、公告、面板、命令行、消息中心,类型决定该元素渲染形式,匹配系统内置组件逻辑
隐藏默认关闭,用于控制该功能的显示隐藏
显示命令支持用命令控制功能在复杂条件下的显示隐藏
执行命令点击触发执行的命令

1.2 编辑 ​

操作列点击【编辑】按钮打开表单,修改信息后点击【确定】保存成功后刷新页面可见更新内容。

2. 删除功能 ​

操作列点击【删除】按钮,二次确认删除,删除成功后刷新页面可见效果

3.预设主题

二、主题设置 ​

主题设置用于自定义系统整体布局、界面风格、配色方案、圆角、菜单样式等视觉效果,支持选择预设主题、精细化自定义各类组件颜色,同时支持主题配置导入导出,快速复用样式方案。路由/system-management/theme-settings

loading-ag-4660

提示:修改全部配置完成后,需要点击右上角【保存设置】生效;【重置为默认】可一键恢复系统初始样式。

1.布局模式 ​

提供 5 种系统整体布局,点击对应卡片即可预览选中

  1. 顶部导航:菜单全部放置页面顶部,无左侧侧边栏

  2. 侧边栏:左侧常驻菜单栏,顶部为页头导航(系统常用布局)

  3. 混合模式:左侧菜单 + 顶部二级导航组合布局

  4. 紧凑模式:侧边栏布局,缩小间距、界面更紧凑

  5. 双列模式:左侧双栏菜单布局 面包屑、多标签可用开启关闭

2.界面形态 ​

控制全局卡片、按钮、导航选中样式

2.1 卡片布局 ​

  • 线框:模块底部使用分割线区分内容
  • 卡片:表格、搜索区域增加阴影卡片样式

2.2 按钮圆角 ​

拖动滑块 / 输入数值,统一控制页面所有按钮圆角大小

2.3 导航菜单选中 ​

  • 通栏贴边(默认):菜单选中背景铺满整行

  • 内缩圆角:选中菜单采用内缩圆角样式(仅作用于侧边栏、顶部导航菜单)

2.4 预设主题 ​

系统内置 12 套成套配色方案,一键应用,快速更换系统主色调。应用预设主题后,会自动覆盖下方自定义颜色;如需微调,应用主题后再修改下方颜色配置。

loading-ag-6132

2.5 自定义主题 ​

除预设主题对平台统一处理,还可自定义平台的主题色】菜单栏、标签页等样式风格。

2.5.1 主题色及头部 ​

自定义系统主色调、顶部导航栏背景与文字颜色

loading-ag-6191
2.5.2 菜单栏 ​

自定义菜单栏的悬停、选中、默认状态下的文字颜色及背景色的设置,背景色支持渐变色。

loading-ag-6200

2.5.3 标签页 ​

控制多标签栏、页面内 Tab 组件样式

loading-ag-6211
2.5.4 侧边栏与顶部 ​

设置侧边栏的宽度,侧边栏默认展示收缩状态等

loading-ag-6216

设置logo的文字、背景颜色以及logo位置

loading-ag-6227
2.5.6 内容区与卡片 ​

控制页面主体内容、表格、卡片样式

loading-ag-6245
2.5.7 左侧树 ​

针对页面树形组件(左侧树选择器)样式

loading-ag-6264

2.6 配置导入导出 ​

上述配置会形成json显示到文本域内,除鼠标点击配置外还可直接更改json,可将当前配置导出;除导出配置外还可将配置json直接导入到系统。

loading-ag-6273

常见问题 ​

改了 Logo 没变化 ​

确认已保存,并强制刷新;检查是否改错环境/站点。

主题色部分页面未变 ​

个别自定义页可能写死颜色;优先改主题变量,再查页面内联样式。

页头与系统设置 Logo 不一致 ​

页头 Logo 与站点配置 Logo 可能分属不同入口;按实际顶栏来源改对应配置。

白泽 ProCode 开发者文档