主题定制

在复杂的业务场景中，默认主题可能无法完全适配多样化的项目需求。为此，iBizHUB 提供了灵活的主题定制能力，支持开发者根据业务需求自定义样式变量、布局风格和视觉元素，确保项目在品牌一致性的同时满足个性化需求。

样式配置定制

在现代前端开发实践中，样式管理面临着多样化的挑战——从细微的组件样式调整到大规模的设计系统重构。iBizHUB 为此提供了灵活的样式解决方案：既支持原子级的控件样式定制，满足精细化设计需求；又能实现应用级的全局主题配置，确保设计语言的一致性。可使用 iBizHUB 封装的主题工具，对主题指定样式变量进行调整，也可对控件样式变量进行调整。

// 打开自定义主题配置
ibiz.util.theme.customTheme();

界面布局配置定制

iBizHUB 拥有强大的定制页面能力，借助 modeling 建模平台，开发者能够快速调整界面布局结构，全程无需编写代码。通过直观的组件拖拽操作，即可轻松打造契合业务需求的页面布局，显著提升用户体验。

插件定制

若要自定义整个应用的主题样式和视图布局，可通过主题插件实现，其开发流程如下：

1. 在modeling建模平台中创建并启用插件

• 填写主题名称、主题标识、主题参数等信息。主题标识需要和主题插件包中的主题class类名保持一致。

• 主题参数中需配置theme-package-path参数，其值需指向加载的主题插件包。

提示

theme-package-path参数的内容为包和包的版本信息<package>@<version>，需符合 unpkg 模块规范。

2. 创建插件包

通过平台cli工具包的create-plugin指令生成插件模板。根据提示依次输入插件名称、插件描述、插件类别、插件分组等信息。本地开发调试流程可参见插件模板的README文档。

提示

• 插件名称必须只能由字母和中划线组成。
• 插件类别需选主题插件。

# 全局安装cli工具包
pnpm i @ibiz-template/cli -g

# 执行create-plugin指令，生成插件模板，参数`o`为插件输出的目录
ibiz-temp create-plugin -o ./src/plugins

3. 调整主题样式和视图布局

• 调整样式风格

// customtheme 为主题插件标识
:root.customtheme {
  // 样式
}

• 通过覆盖默认视图布局模型的方式调整视图布局

import DEGridView from "./de-grid-view-layout"; // 默认实体表格视图布局模型

export function install(callBack: (key: string, model: any) => void): void {
  // 实体表格视图
  callBack("DEGRIDVIEW_DEFAULT", DEGridView);
}

4. 部署插件包

• 将上一步创建的插件包打包后的构建产物部署到资源服务器上，如 cdn、npm 私有库等。
• 在主应用的 environment.js 里配置环境变量 pluginBaseUrl，其值需指向插件资源服务器的基础路径，详情参见 环境变量。