mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
docs: add new version modal (#55810)
Co-authored-by: 遇见同学 <1875694521@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
40
.dumi/theme/common/VersionUpgrade/ChangeLog.tsx
Normal file
40
.dumi/theme/common/VersionUpgrade/ChangeLog.tsx
Normal file
@@ -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 (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<C />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChangeLog;
|
||||||
12
.dumi/theme/common/VersionUpgrade/en-US.md
Normal file
12
.dumi/theme/common/VersionUpgrade/en-US.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<p align="center">
|
||||||
|
<img src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*_DMIQaxDuXsAAAAAgDAAAAgAegCCAQ/fmt.webp" alt="Ant Design 6.0">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
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!
|
||||||
98
.dumi/theme/common/VersionUpgrade/index.tsx
Normal file
98
.dumi/theme/common/VersionUpgrade/index.tsx
Normal file
@@ -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 (
|
||||||
|
<Modal
|
||||||
|
title={locale.title}
|
||||||
|
open={open}
|
||||||
|
width={`min(90vw, 800px)`}
|
||||||
|
centered
|
||||||
|
onCancel={handleClose}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
padding: 0,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
footer={() => (
|
||||||
|
<Flex align="center" gap="middle" justify="flex-end">
|
||||||
|
<Button href={fullChangelogUrl} onClick={handleClose}>
|
||||||
|
{locale.fullChangelog}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
variant="solid"
|
||||||
|
href={releasePostUrl}
|
||||||
|
target="_blank"
|
||||||
|
onClick={handleClose}
|
||||||
|
>
|
||||||
|
{locale.releasePost}
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<ChangeLog />
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default VersionUpgradeModal;
|
||||||
12
.dumi/theme/common/VersionUpgrade/zh-CN.md
Normal file
12
.dumi/theme/common/VersionUpgrade/zh-CN.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<p align="center">
|
||||||
|
<img src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*_DMIQaxDuXsAAAAAgDAAAAgAegCCAQ/fmt.webp" alt="Ant Design 6.0">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
经过大量打磨,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)** 也同步发布,欢迎探索!
|
||||||
@@ -21,6 +21,7 @@ import useLocalStorage from '../../hooks/useLocalStorage';
|
|||||||
import { getBannerData } from '../../pages/index/components/util';
|
import { getBannerData } from '../../pages/index/components/util';
|
||||||
import { ANT_DESIGN_SITE_THEME } from '../common/ThemeSwitch';
|
import { ANT_DESIGN_SITE_THEME } from '../common/ThemeSwitch';
|
||||||
import type { ThemeName } from '../common/ThemeSwitch';
|
import type { ThemeName } from '../common/ThemeSwitch';
|
||||||
|
import VersionUpgrade from '../common/VersionUpgrade';
|
||||||
import SiteThemeProvider from '../SiteThemeProvider';
|
import SiteThemeProvider from '../SiteThemeProvider';
|
||||||
import type { SimpleComponentClassNames, SiteContextProps } from '../slots/SiteContext';
|
import type { SimpleComponentClassNames, SiteContextProps } from '../slots/SiteContext';
|
||||||
import SiteContext from '../slots/SiteContext';
|
import SiteContext from '../slots/SiteContext';
|
||||||
@@ -317,7 +318,10 @@ const GlobalLayout: React.FC = () => {
|
|||||||
<SiteThemeProvider theme={themeConfig}>
|
<SiteThemeProvider theme={themeConfig}>
|
||||||
<HappyProvider disabled={!theme.includes('happy-work')}>
|
<HappyProvider disabled={!theme.includes('happy-work')}>
|
||||||
<ConfigProvider {...componentsClassNames}>
|
<ConfigProvider {...componentsClassNames}>
|
||||||
<App>{outlet}</App>
|
<App>
|
||||||
|
{outlet}
|
||||||
|
<VersionUpgrade />
|
||||||
|
</App>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
</HappyProvider>
|
</HappyProvider>
|
||||||
</SiteThemeProvider>
|
</SiteThemeProvider>
|
||||||
|
|||||||
6
typings/custom-typings.d.ts
vendored
6
typings/custom-typings.d.ts
vendored
@@ -18,6 +18,12 @@ declare module '*.json' {
|
|||||||
export default value;
|
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' {
|
declare module '@npmcli/run-script' {
|
||||||
export default function runScript(options: {
|
export default function runScript(options: {
|
||||||
[key: string]: string | string[] | boolean | NodeJS.ProcessEnv;
|
[key: string]: string | string[] | boolean | NodeJS.ProcessEnv;
|
||||||
|
|||||||
Reference in New Issue
Block a user