From a6f6db6d1040712278b57b8fa1151a0f2d88c840 Mon Sep 17 00:00:00 2001 From: Alex Zhu Date: Tue, 5 May 2026 00:40:01 +0800 Subject: [PATCH] refactor: redesign footer layout with grouped version info (#11758) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: redesign footer layout with grouped version info Replace DefaultFooter with custom layout using createStyles. Version info is now grouped by category (ver/hash, Umi, Utoo) with label-value pairs in monospace font and pipe separators, improving visual hierarchy and readability. Co-Authored-By: Claude Opus 4.7 * fix: add aria-hidden to footer separators and fix login test - Add aria-hidden="true" to decorative pipe separators for screen readers - Use regex match in login test to find "Ant Design Pro" text (now rendered as "Ant Design Pro © 2026" in the copyright line) - Update test snapshots Co-Authored-By: Claude Opus 4.7 * refactor: replace custom pipe separators with antd Divider Use Divider type="vertical" from antd instead of custom span pipes, which gives proper semantic markup and consistent theme-aware styling. Co-Authored-By: Claude Opus 4.7 --------- Co-authored-by: Claude Opus 4.7 --- src/components/Footer/index.tsx | 160 +++++++---- .../login/__snapshots__/login.test.tsx.snap | 262 +++++++++++------- src/pages/user/login/login.test.tsx | 2 +- 3 files changed, 274 insertions(+), 150 deletions(-) diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 1b08bf6d..9f5f0a04 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,6 +1,7 @@ import { GithubOutlined } from '@ant-design/icons'; -import { DefaultFooter } from '@ant-design/pro-components'; import packageJson from '@root/package.json'; +import { Divider } from 'antd'; +import { createStyles } from 'antd-style'; import React from 'react'; const getRepoUrl = () => { @@ -10,66 +11,123 @@ const getRepoUrl = () => { typeof packageJson.repository === 'string' ? packageJson.repository : (packageJson.repository as { url: string }).url; - // Parse git URLs like git@github.com:owner/name.git or https://github.com/owner/name.git const match = repo.match(/github\.com[:/]([^/]+)\/([^/.]+)/); if (!match) return 'https://github.com/ant-design/ant-design-pro'; return `https://github.com/${match[1]}/${match[2]}`; }; const REPO_URL = getRepoUrl(); - -// Git commit hash, resolved at build time from env vars or git const COMMIT_HASH = process.env.COMMIT_HASH || ''; +const useStyles = createStyles(({ token, css }) => ({ + footer: css` + padding: 16px 24px; + text-align: center; + color: ${token.colorTextDescription}; + font-size: ${token.fontSizeSM}px; + line-height: ${token.lineHeight}; + background: transparent; + `, + copyright: css` + margin-bottom: 6px; + `, + link: css` + color: ${token.colorTextDescription}; + text-decoration: none; + transition: color ${token.motionDurationMid}; + + &:hover { + color: ${token.colorText}; + } + `, + meta: css` + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 6px 12px; + font-family: ${token.fontFamilyCode}; + font-size: ${token.fontSizeSM - 1}px; + `, + group: css` + display: inline-flex; + align-items: center; + gap: 4px; + `, + label: css` + color: ${token.colorTextQuaternary}; + `, + divider: css` + display: inline-block; + vertical-align: middle; + `, +})); + const Footer: React.FC = () => { + const { styles } = useStyles(); + const year = new Date().getFullYear(); + return ( - - - Ant Design Pro - - ), - href: REPO_URL, - blankTarget: true, - }, - ]} - /> +
+
Ant Design Pro © {year}
+ +
); }; diff --git a/src/pages/user/login/__snapshots__/login.test.tsx.snap b/src/pages/user/login/__snapshots__/login.test.tsx.snap index dfe198a7..e799acfc 100644 --- a/src/pages/user/login/__snapshots__/login.test.tsx.snap +++ b/src/pages/user/login/__snapshots__/login.test.tsx.snap @@ -454,77 +454,110 @@ exports[`Login Page should login success 1`] = ` - + @@ -983,77 +1016,110 @@ exports[`Login Page should show login form 1`] = ` - + diff --git a/src/pages/user/login/login.test.tsx b/src/pages/user/login/login.test.tsx index 77c6e471..a2606e85 100644 --- a/src/pages/user/login/login.test.tsx +++ b/src/pages/user/login/login.test.tsx @@ -81,7 +81,7 @@ describe('Login Page', () => { await (await rootContainer.findByText('Login')).click(); // Wait for login to succeed and navigate to home page - await rootContainer.findByText('Ant Design Pro', undefined, { + await rootContainer.findByText(/Ant Design Pro/, undefined, { timeout: 10000, });