From d36292d02b5f014114993765645a54f398953d7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Tue, 25 Nov 2025 18:03:22 +0800 Subject: [PATCH] docs: add new version modal (#55810) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 遇见同学 <1875694521@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 --- .../theme/common/VersionUpgrade/ChangeLog.tsx | 40 ++++++++ .dumi/theme/common/VersionUpgrade/en-US.md | 12 +++ .dumi/theme/common/VersionUpgrade/index.tsx | 98 +++++++++++++++++++ .dumi/theme/common/VersionUpgrade/zh-CN.md | 12 +++ .dumi/theme/layouts/GlobalLayout.tsx | 6 +- typings/custom-typings.d.ts | 6 ++ 6 files changed, 173 insertions(+), 1 deletion(-) create mode 100644 .dumi/theme/common/VersionUpgrade/ChangeLog.tsx create mode 100644 .dumi/theme/common/VersionUpgrade/en-US.md create mode 100644 .dumi/theme/common/VersionUpgrade/index.tsx create mode 100644 .dumi/theme/common/VersionUpgrade/zh-CN.md diff --git a/.dumi/theme/common/VersionUpgrade/ChangeLog.tsx b/.dumi/theme/common/VersionUpgrade/ChangeLog.tsx new file mode 100644 index 0000000000..ed9f0fc808 --- /dev/null +++ b/.dumi/theme/common/VersionUpgrade/ChangeLog.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { createStyles } from 'antd-style'; + +import useLocale from '../../../hooks/useLocale'; +import EN from './en-US.md'; +import CN from './zh-CN.md'; + +const changeLog = { cn: CN, en: EN }; + +const useStyle = createStyles(({ css }) => ({ + container: css` + max-height: max(62vh, 500px); + overflow-y: scroll; + scrollbar-width: thin; + scrollbar-color: #eaeaea transparent; + /* 图片铺满 */ + && img { + display: block; + width: 100%; + max-width: 100%; + } + `, +})); + +const ChangeLog = () => { + const [, lang] = useLocale(); + + const { styles } = useStyle(); + + const validatedLanguage = Object.keys(changeLog).includes(lang) ? lang : 'en'; + const C = changeLog[validatedLanguage]; + + return ( +
+ +
+ ); +}; + +export default ChangeLog; diff --git a/.dumi/theme/common/VersionUpgrade/en-US.md b/.dumi/theme/common/VersionUpgrade/en-US.md new file mode 100644 index 0000000000..043bf16d13 --- /dev/null +++ b/.dumi/theme/common/VersionUpgrade/en-US.md @@ -0,0 +1,12 @@ +

+ Ant Design 6.0 +

+ +After extensive refinement, v6 is officially released! This upgrade focuses on deep technical optimizations for better performance and developer experience: + +- **Technical Upgrades**: Minimum React 18 support; defaults to Pure CSS Variables mode, supporting zero-runtime styles and real-time theme switching. +- **Semantic Structure**: All components now feature semantic DOM structure, enabling flexible customization via `classNames`. +- **New Features**: Added Masonry component; Tooltip panning; InputNumber spinner mode; Resizable Drawer; default blur mask for overlays. +- **Smooth Migration**: Direct upgrade from v5 without codemod tools. For v5 documentation, please visit [5x.ant.design](https://5x.ant.design). + +**[Ant Design X 2.0](https://github.com/ant-design/x/issues/1357)** for AI scenarios is also released simultaneously. Explore now! diff --git a/.dumi/theme/common/VersionUpgrade/index.tsx b/.dumi/theme/common/VersionUpgrade/index.tsx new file mode 100644 index 0000000000..aef98d8a84 --- /dev/null +++ b/.dumi/theme/common/VersionUpgrade/index.tsx @@ -0,0 +1,98 @@ +import React from 'react'; +import { Button, Flex, Modal, version } from 'antd'; +import { useLocation } from 'dumi'; + +import useLocale from '../../../hooks/useLocale'; +import * as utils from '../../utils'; +import ChangeLog from './ChangeLog'; + +const [major] = version.split('.'); +const STORAGE_KEY = `antd${major}-version-upgrade-notify`; + +// 弹窗截止日期 +const NOTIFICATION_DEADLINE = new Date('2026/02/01').getTime(); + +const locales = { + cn: { + title: 'Ant Design 6.0 现已发布 🎉', + releasePost: '发布公告 🚀', + fullChangelog: '完整更新日志 📝', + }, + en: { + title: 'Ant Design 6.0 has been released 🎉', + releasePost: 'Release Post 🚀', + fullChangelog: 'Full Changelog 📝', + }, +}; + +const VersionUpgradeModal = () => { + const [locale, lang] = useLocale(locales); + const { pathname } = useLocation(); + + const [open, updateOpen] = React.useState(false); + + const isCN = lang === 'cn' || utils.isZhCN(pathname); + + function handleClose() { + localStorage.setItem(STORAGE_KEY, Date.now().toString()); + updateOpen(false); + } + + React.useEffect(() => { + const lastTime = localStorage.getItem(STORAGE_KEY); + const now = Date.now(); + + if (now > NOTIFICATION_DEADLINE) { + return; + } + + if (!lastTime) { + const timer = setTimeout(() => { + updateOpen(true); + }, 1000); + + return () => { + clearTimeout(timer); + }; + } + }, []); + + const fullChangelogUrl = utils.getLocalizedPathname('/changelog', isCN).pathname; + + const releasePostUrl = `https://github.com/ant-design/ant-design/issues/${isCN ? '55805' : '55804'}`; + + return ( + ( + + + + + )} + > + + + ); +}; + +export default VersionUpgradeModal; diff --git a/.dumi/theme/common/VersionUpgrade/zh-CN.md b/.dumi/theme/common/VersionUpgrade/zh-CN.md new file mode 100644 index 0000000000..4120a708ec --- /dev/null +++ b/.dumi/theme/common/VersionUpgrade/zh-CN.md @@ -0,0 +1,12 @@ +

+ Ant Design 6.0 +

+ +经过大量打磨，v6 版本现已正式发布！本次升级专注于技术深度优化，带来更佳的性能与开发体验： + +- **技术升级**：最低支持 React 18，移除历史包袱；默认启用纯 CSS 变量模式，支持零运行时样式与实时主题切换。 +- **语义化结构**：全量组件完成 DOM 语义化改造，配合 `classNames` 属性实现更灵活的样式定制。 +- **新特性**：新增 Masonry 瀑布流组件；Tooltip 支持平移；InputNumber 新增按钮模式；Drawer 支持拖拽；弹层默认开启模糊背景。 +- **平滑迁移**：v5 项目可直接升级，无需 codemod 工具。如需查看 v5 文档，请访问 [5x.ant.design](https://5x.ant.design)。 + +同时，面向 AI 场景的 **[Ant Design X 2.0](https://github.com/ant-design/x/issues/1358)** 也同步发布，欢迎探索！ diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx index 9e4e4b63a4..45013494ff 100644 --- a/.dumi/theme/layouts/GlobalLayout.tsx +++ b/.dumi/theme/layouts/GlobalLayout.tsx @@ -21,6 +21,7 @@ import useLocalStorage from '../../hooks/useLocalStorage'; import { getBannerData } from '../../pages/index/components/util'; import { ANT_DESIGN_SITE_THEME } from '../common/ThemeSwitch'; import type { ThemeName } from '../common/ThemeSwitch'; +import VersionUpgrade from '../common/VersionUpgrade'; import SiteThemeProvider from '../SiteThemeProvider'; import type { SimpleComponentClassNames, SiteContextProps } from '../slots/SiteContext'; import SiteContext from '../slots/SiteContext'; @@ -317,7 +318,10 @@ const GlobalLayout: React.FC = () => { - {outlet} + + {outlet} + + diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts index fc528d3d36..af2efed0c3 100644 --- a/typings/custom-typings.d.ts +++ b/typings/custom-typings.d.ts @@ -18,6 +18,12 @@ declare module '*.json' { export default value; } +// https://github.com/umijs/dumi/pull/2281 +declare module '*.md' { + const content: React.FC; + export default content; +} + declare module '@npmcli/run-script' { export default function runScript(options: { [key: string]: string | string[] | boolean | NodeJS.ProcessEnv;