keycloakify-starter 亮色改为雾白、冰蓝工作区，不再大面积深色。

暗色使用深海蓝灰，并保持足够的层级和对比度。 class 主题同样支持亮暗模式。 Account/Admin 页头增加模式切换按钮，选择会持久保存。仍遵守 Keycloak 的 darkMode=false 配置，关闭时只允许亮色。 Account 统一为“页面上下文 → 身份业务区 → 操作区”结构。 Admin 统一为“领域上下文 → 业务内容 → 固定操作区”结构。表格、表单、详情、向导、弹窗、空状态、安全设备及应用授权组件全部纳入统一设计系统。移动端自动收起侧栏、双栏变单栏，并调整固定操作区。
2026-08-04 17:08:35 +08:00
parent 676c73c82b
commit ec277d4e3f
14 changed files with 1021 additions and 192 deletions
@@ -0,0 +1,150 @@
+/**
+ * This file has been claimed for ownership from @keycloakify/keycloak-admin-ui version 260700.0.2.
+ * To relinquish ownership and restore this file to its original content, run the following command:
+ *
+ * $ npx keycloakify own --path "admin/PageHeader.tsx" --revert
+ */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+import logoSvgUrl from "./assets/logo.svg";
+import { KeycloakMasthead, useEnvironment, useHelp } from "../shared/keycloak-ui-shared";
+import { DropdownItem, ToolbarItem } from "../shared/@patternfly/react-core";
+import { HelpIcon } from "../shared/@patternfly/react-icons";
+import { useTranslation } from "react-i18next";
+import { Link, useHref } from "react-router-dom";
+import { PageHeaderClearCachesModal } from "./PageHeaderClearCachesModal";
+import { HelpHeader } from "./components/help-enabler/HelpHeader";
+import { useAccess } from "./context/access/Access";
+import { useRealm } from "./context/realm-context/RealmContext";
+import { toDashboard } from "./dashboard/routes/Dashboard";
+import type { Environment } from "./environment-types";
+import { usePreviewLogo } from "./realm-settings/themes/LogoContext";
+import { joinPath } from "./utils/joinPath";
+import { useIsFeatureDisabled, Feature } from "./utils/useIsFeatureEnabled";
+import useToggle from "./utils/useToggle";
+import { ThemeModeToggle } from "../shared/ThemeModeToggle";
+
+const ManageAccountDropdownItem = () => {
+    const { keycloak } = useEnvironment();
+    const { t } = useTranslation();
+    const isFeatureDisabled = useIsFeatureDisabled();
+
+    if (isFeatureDisabled(Feature.AccountV3)) {
+        return null;
+    }
+
+    return (
+        <DropdownItem
+            key="manage account"
+            id="manage-account"
+            onClick={() => keycloak.accountManagement()}
+        >
+            {t("manageAccount")}
+        </DropdownItem>
+    );
+};
+
+const ServerInfoDropdownItem = () => {
+    const { realm } = useRealm();
+    const { t } = useTranslation();
+
+    return (
+        <DropdownItem
+            key="server info"
+            component={props => <Link {...props} to={toDashboard({ realm })} />}
+        >
+            {t("realmInfo")}
+        </DropdownItem>
+    );
+};
+
+const ClearCachesDropdownItem = () => {
+    const { t } = useTranslation();
+    const [open, toggleModal] = useToggle();
+
+    return (
+        <>
+            <DropdownItem key="clear caches" onClick={() => toggleModal()}>
+                {t("clearCachesTitle")}
+            </DropdownItem>
+            {open && <PageHeaderClearCachesModal onClose={() => toggleModal()} />}
+        </>
+    );
+};
+
+const HelpDropdownItem = () => {
+    const { t } = useTranslation();
+    const { enabled, toggleHelp } = useHelp();
+    return (
+        <DropdownItem data-testId="helpIcon" icon={<HelpIcon />} onClick={toggleHelp}>
+            {enabled ? t("helpEnabled") : t("helpDisabled")}
+        </DropdownItem>
+    );
+};
+
+const kebabDropdownItems = (isMasterRealm: boolean, isManager: boolean) => [
+    <ManageAccountDropdownItem key="kebab Manage Account" />,
+    <ServerInfoDropdownItem key="kebab Server Info" />,
+    ...(isMasterRealm && isManager
+        ? [<ClearCachesDropdownItem key="Clear Caches" />]
+        : []),
+    <HelpDropdownItem key="kebab Help" />
+];
+
+const userDropdownItems = (isMasterRealm: boolean, isManager: boolean) => [
+    <ManageAccountDropdownItem key="Manage Account" />,
+    <ServerInfoDropdownItem key="Server info" />,
+    ...(isMasterRealm && isManager
+        ? [<ClearCachesDropdownItem key="Clear Caches" />]
+        : [])
+];
+
+export const Header = () => {
+    const { environment, keycloak } = useEnvironment<Environment>();
+    const { t } = useTranslation();
+    const { realm } = useRealm();
+    const { hasAccess } = useAccess();
+
+    const contextLogo = usePreviewLogo();
+    const customLogo = contextLogo?.logo;
+
+    const isMasterRealm = realm === environment.masterRealm;
+    const isManager = hasAccess("manage-realm");
+
+    const url = useHref(toDashboard({ realm }));
+    const logoUrl = environment.logoUrl ? environment.logoUrl : url;
+
+    return (
+        <KeycloakMasthead
+            data-testid="page-header"
+            keycloak={keycloak}
+            features={{ hasManageAccount: false }}
+            brand={{
+                href: logoUrl,
+                src: customLogo?.trim() ? customLogo : logoSvgUrl,
+                alt: t("logo"),
+                className: "keycloak__pageheader_brand"
+            }}
+            dropdownItems={userDropdownItems(isMasterRealm, isManager)}
+            kebabDropdownItems={kebabDropdownItems(isMasterRealm, isManager)}
+            toolbarItems={[
+                <ToolbarItem key="theme-mode">
+                    <ThemeModeToggle />
+                </ToolbarItem>,
+                <ToolbarItem
+                    key="help"
+                    align={{ default: "alignRight" }}
+                    visibility={{
+                        default: "hidden",
+                        md: "visible"
+                    }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
+                >
+                    <HelpHeader />
+                </ToolbarItem>
+            ]}
+        />
+    );
+};