尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

ToolJet 白标(White Labeling)完整配置指南:实例级与工作区级的品牌定制实现

ToolJet 白标(White Labeling)完整配置指南:实例级与工作区级的品牌定制实现 ToolJet 白标White Labeling完整配置指南实例级与工作区级的品牌定制实现【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJetToolJet 的白标White Labeling功能允许你在不修改源码的前提下将自托管部署或云端工作区的外观全面替换为你自己的品牌形象——包括登录页、仪表盘、应用编辑器与已发布应用中的 Logo、浏览器标签页的 Favicon 以及页面标题让终端用户感知不到底层运行的是 ToolJet。本文以官方文档为骨架结合当前仓库的前后端源码深入讲解白标配置的入口、字段、生效范围与底层实现机制读完即可在自己的实例或工作区上完成完整的品牌化改造。白标功能是什么白标White Labeling本质上是把 ToolJet 平台的可感知品牌元素抽取为可配置项包括Application Logo应用 Logo展示在登录页、仪表盘、应用编辑器和已部署应用中的品牌 Logo推荐尺寸为130px × 26px。Favicon站点图标显示在浏览器标签页上的小图标推荐尺寸为32px × 32px或16px × 16px。Page Title页面标题显示在浏览器标签页上的页面标题推荐长度50–60 个字符。从仓库实体定义看白标配置还额外支持一张可选的Banner 图片banner_image字段varchar(1024)允许为空以及用于启停的status状态字段ACTIVE/INACTIVE详见 white_labelling.entity.ts。白标的应用层级实例级 vs 工作区级白标配置的生效层级取决于部署形态部署形态配置层级访问入口示例 URL自托管Self-hosted实例级Instance levelhttps://app.corp.com/instance-settings/white-labelling云Cloud工作区级Workspace levelhttps://app.corp.com/workspace-slug/settings/white-labelling这一设计在数据模型上有直接体现white_labelling表中的organization_id列设置了unique约束其中organizationId为空的单行记录专门代表实例级白标见实体文件中的注释与迁移AddUniqueConstraintForNullOrganizationId的说明而带organizationId的记录则代表具体工作区的白标并与organizations表通过OneToOne关联。相关历史迁移包括 AddWhiteLabellingsettings.ts、renameWhiteLabellingTableColumns.ts 与 MoveInstanceWhiteLabelsToWhiteLabelsEntity.ts。前端请求逻辑同样区分了这两种层级在 white-labelling.service.js 中get方法会先读取请求头tj-workspace-id判断当前工作区当运行版本为 cloud 且存在组织 ID 时请求/white-labelling/:organizationId端点否则CE / EE / 无组织 ID 的 Cloud请求通用的/white-labelling端点。自托管实例级配置对于自托管实例白标是实例级设置会影响该实例上所有工作区、所有应用使用管理员账号登录 ToolJet 实例。进入Settings White Labelling对应 URL 为https://app.corp.com/instance-settings/white-labelling。在配置页中分别设置Application Logo上传或填写 Logo 资源地址推荐 130px × 26px。Favicon填写站点图标地址推荐 32px × 32px 或 16px × 16px。Page Title填写浏览器标签页标题推荐 50–60 字符。保存后品牌元素即在整个实例范围内生效。云端工作区级配置对于云端Cloud部署白标按工作区生效不同工作区可以拥有彼此独立的品牌配置以工作区成员身份登录 ToolJet。进入Settings White Labelling对应 URL 为https://app.corp.com/workspace-slug/settings/white-labelling。配置项与自托管完全相同Application Logo、Favicon、Page Title仅作用于当前工作区。保存后仅该工作区内的界面元素登录页、仪表盘、编辑器、已发布应用被品牌化。底层实现字段、接口与前端渲染链路服务端数据模型与接口服务端将白标建模为独立的white_labelling表核心字段如下white_labelling.entity.ts字段数据库列类型说明ididuuid 主键记录唯一标识organizationIdorganization_idvarcharunique所属工作区null表示实例级logologovarchar(255)品牌 Logo 资源地址texttextvarchar(50)品牌名称用于页面标题拼接faviconfaviconvarchar(255)站点图标资源地址bannerImagebanner_imagevarchar(1024)可空可选的 Banner 图片statusstatusenum(ACTIVE,INACTIVE)白标启用状态默认 ACTIVE对外接口由 WhiteLabellingController 提供均以white-labelling为前缀并通过InitModule(MODULES.WHITE_LABELLING)纳入权限模块GET /white-labelling获取实例级白标配置getInstanceWhiteLabelling。GET /white-labelling/:organizationId获取指定工作区的白标配置getWorkspaceWhiteLabelling。PUT /white-labelling与PUT /white-labelling/:organizationId对应的更新接口。值得注意的实现细节当前仓库的 CE 版本中更新类接口PUT直接抛出NotFoundException即白标配置作为付费能力被刻意禁用同时getProcessedSettings在未配置时返回内置默认值并标记is_default: true。默认值与前端定义完全一致constant/index.ts{ white_label_logo: assets/images/tj-logo.svg, white_label_text: ToolJet, white_label_favicon: assets/images/logo.svg, }更新请求的校验由 dto/index.ts 中的UpdateWhiteLabellingDto完成white_label_logo、white_label_text、white_label_favicon、white_label_banner四个字段均为可选字符串且统一经过sanitizeInput清洗避免注入类输入。前端渲染链路前端通过 Zustand 全局 store 管理白标状态whiteLabellingStore.js初始化时使用默认品牌text 为ToolJetlogo 与 favicon 为空加载成功后写入whiteLabelText、whiteLabelLogo、whiteLabelFavicon、whiteLabelBanner及isDefaultWhiteLabel标记同时同步给 AppBuilder 的whiteLabellingSlice保证应用编辑器中也能即时反映品牌。页面的实际渲染由 whiteLabelling.js 驱动setFaviconAndTitle(location)根据当前路由动态设置浏览器标签页的 favicon 与标题。若当前处于编辑器/查看器路径/apps/、/applications/则跳过标题改写其余路由Settings、Marketplace、Workflows、Data sources、Audit logs、Profile settings、Home 等会拼接为页面名 | 品牌名的格式。fetchAndSetWindowTitle(pageDetails)在应用查看器/编辑器场景下将标题设置为应用名 | 品牌名预览态加Preview -前缀并会读取许可证状态未授权时回退为应用名 | ToolJet。applyWhiteLabelling()从 store 读取品牌值动态替换link relicon的href并更新document.title。checkWhiteLabelsDefaultState()/resetToDefaultWhiteLabels()判断当前配置是否仍为默认值以及一键恢复默认品牌。常见问题FAQ问许可证或订阅过期后白标会怎样答如果许可证或订阅过期白标会自动回退为 ToolJet 的默认品牌形象直到许可证续费生效。这一行为与前端读取许可证状态licenseStatus并回退| ToolJet标题的逻辑相吻合品牌自定义与订阅状态强绑定。配置建议与注意事项图片尺寸Logo 建议 130px × 26px横向品牌条Favicon 建议 32px × 32px 或 16px × 16pxSVG 格式兼容性最好前端默认创建image/svgxml类型的 icon 链接。标题长度50–60 字符能在浏览器标签页与搜索结果中完整展示而不被截断。层级选择自托管优先在实例级统一配置避免逐工作区重复维护云端则天然支持按工作区差异化品牌适合多租户/MSP 场景。权限白标接口受能力守卫ability/guard.ts保护只有具备对应能力GET/UPDATE/GET_ORGANIZATION_WHITE_LABELS/UPDATE_WORKSPACE_SETTINGS_CLOUD的用户才能读取或修改参见 constant/index.ts。回退行为未配置任何自定义品牌时系统自动使用默认 Logoassets/images/tj-logo.svg、默认 Faviconassets/images/logo.svg与默认品牌名ToolJet因此无需额外初始化即可运行。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表