根据 kcContext.themeName 自动识别 class 与默认 NEXUS 主题。

class 控制台复用登录页的蓝、珊瑚、黄色、绿色档案风格。
账号控制台和管理控制台均支持亮色、暗色模式。
优化侧栏文字对比度、身份卡、按钮、背景网格及主题强调色。
修复约 1050px 宽度下内容区横向溢出。

src/.gitignore

@@ -7,6 +7,8 @@
 # admin/index.css
 # admin/KcAdminUi.tsx
 # account/assets/logo.svg
+# account/personal-info/PersonalInfo.tsx
+# account/root/PageNav.tsx
 # admin/assets/logo.svg
 # admin/i18n/messages_en.properties
 # admin/i18n/messages_zh_Hans.properties
@@ -15,6 +17,7 @@
 # email/messages/messages_en.properties
 # email/messages/messages_zh_CN.properties
 # email/messages/messages_zh_TW.properties
+# account/components/page/Page.tsx
 # === Owned files end =====
 
 # === @keycloakify/email-native v260007.0.0 ===
@@ -904,7 +907,6 @@
 /account/i18n/messages_zh_Hans.properties
 /account/i18n/messages_zh_Hant.properties
 /account/organizations/Organizations.tsx
-/account/personal-info/PersonalInfo.tsx
 /account/resources/EditTheResource.tsx
 /account/resources/PermissionRequest.tsx
 /account/resources/Resources.tsx
@@ -914,7 +916,6 @@
 /account/resources/ShareTheResource.tsx
 /account/root/header.module.css
 /account/root/Header.tsx
-/account/root/PageNav.tsx
 /account/root/Root.tsx
 /account/utils/formatDate.ts
 /account/utils/joinPath.ts
@@ -1074,4 +1075,3 @@
 /account/assets/passkeys/zoho-light.svg
 /account/assets/passkeys/ztpass-light.png
 /account/components/datalist/EmptyRow.tsx
-/account/components/page/Page.tsx

src/account/KcAccountUi.tsx

@@ -16,8 +16,12 @@ import { environment } from "./environment";
 import { i18n } from "./i18n/i18n";
 import { Root } from "./root/Root";
 import { SessionExpirationWarningOverlay } from "../shared/SessionExpirationWarningOverlay";
+import { getKcContext } from "./KcContext";
 
-document.title = "NEXUS / ID";
+const { kcContext } = getKcContext();
+
+document.documentElement.dataset.kcThemeName = kcContext.themeName;
+document.title = kcContext.themeName === "class" ? "612 / 账户中心" : "NEXUS / ID";
 
 const prI18nInitialized = i18n.init();
 startColorSchemeManagement();

src/account/components/page/Page.tsx

@@ -0,0 +1,51 @@
+/**
+ * This file has been claimed for ownership from @keycloakify/keycloak-account-ui version 260700.0.3.
+ * To relinquish ownership and restore this file to its original content, run the following command:
+ *
+ * $ npx keycloakify own --path "account/components/page/Page.tsx" --revert
+ */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+import {
+    PageSection,
+    Text,
+    TextContent,
+    Title
+} from "../../../shared/@patternfly/react-core";
+import { PropsWithChildren } from "react";
+
+type PageProps = {
+    title: string;
+    description: string;
+};
+
+export const Page = ({ title, description, children }: PropsWithChildren<PageProps>) => {
+    return (
+        <>
+            <PageSection variant="light">
+                <div className="nexus-page-intro">
+                    <div className="nexus-page-intro__copy">
+                        <span className="nexus-page-intro__kicker">
+                            NEXUS / Identity control
+                        </span>
+                        <TextContent>
+                            <Title headingLevel="h1" data-testid="page-heading">
+                                {title}
+                            </Title>
+                            <Text component="p">{description}</Text>
+                        </TextContent>
+                    </div>
+                    <div className="nexus-page-intro__mark" aria-hidden="true">
+                        <span>ID</span>
+                        <i />
+                        <span>ACCOUNT</span>
+                    </div>
+                </div>
+            </PageSection>
+            <PageSection variant="light">{children}</PageSection>
+        </>
+    );
+};