2024 年 9 月 4 日，作者：Erik Jan de Wit
我们很高兴宣布发布两个新的 npm 包，旨在增强 Keycloak 自定义功能。这些基于 PatternFly 构建的 React 组件库提供了构建 Keycloak 帐户和管理控制台的基本组件。该工具使用我们的“可组合 UI”技术为自定义控制台生成示例代码。本质上，这意味着您可以使用我们打算在未来版本中支持的导出 Keycloak 组件来构建您的控制台。
这些包是
此包提供了用于创建 Keycloak 管理控制台的基本组件。
此包提供了用于创建 Keycloak 帐户控制台的基本组件。
此包提供了用于构建 Keycloak UI 的共享组件和实用程序。
使用我们的 npm create keycloak-theme my-theme 命令启动您的项目。这个简化的工具可以生成项目结构、基本依赖项和配置，从而节省宝贵时间。目前，该工具仅适用于帐户控制台，但我们正在努力添加对管理控制台的支持。这将在下一个版本 (26.0.0) 中提供。
运行 npm create keycloak-theme@latest my-theme。
可以使用 npm run start-keycloak 启动 keycloak 服务器
使用 npm run dev 启动开发服务器
通过编辑 src 目录中的文件来自定义主题。
keycloak 服务器将连接到开发服务器，所有更改都将在浏览器中反映出来。只需打开您的浏览器并访问 http://127.0.0.1:8080/realms/master/account/personalInfo 并使用 admin/admin 登录。这将打开 keycloak 帐户控制台。您将看到示例代码中包含一个额外的页面以及每个页面上方的额外内容。
快速开发：在更短的时间内创建出色的 UI。
一致性：遵循 PatternFly 设计系统，以确保统一的外观和感觉。
灵活度：自定义组件以匹配您的品牌和用户偏好。
可升级：具有 npm 包依赖项将使更新您的主题变得更容易。
有关更多信息，请参见 README。