diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index f6b9f852ae..ea07014666 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -2,11 +2,14 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { GithubOutlined, MenuOutlined } from '@ant-design/icons'; import { Alert, Button, Col, ConfigProvider, Popover, Row, Select, Tooltip } from 'antd'; import { createStyles } from 'antd-style'; +import type { DefaultOptionType } from 'antd/es/select'; import { clsx } from 'clsx'; import dayjs from 'dayjs'; import { useLocation, useSiteData } from 'dumi'; import DumiSearchBar from 'dumi/theme-default/slots/SearchBar'; +import useSWR from 'swr'; +import versionsFile from '../../../../public/versions.json'; import useLocale from '../../../hooks/useLocale'; import useLocalStorage from '../../../hooks/useLocalStorage'; import { getBannerData } from '../../../pages/index/components/util'; @@ -14,7 +17,6 @@ import ThemeSwitch from '../../common/ThemeSwitch'; import DirectionIcon from '../../icons/DirectionIcon'; import { ANT_DESIGN_NOT_SHOW_BANNER } from '../../layouts/GlobalLayout'; import * as utils from '../../utils'; -import { getThemeConfig } from '../../utils'; import SiteContext from '../SiteContext'; import type { SharedProps } from './interface'; import Logo from './Logo'; @@ -149,19 +151,57 @@ interface HeaderState { searching: boolean; } +interface VersionItem { + version: string; + url: string; + chineseMirrorUrl?: string; +} + +const fetcher = (...args: Parameters) => { + // eslint-disable-next-line compat/compat + return fetch(...args).then((res) => res.json()); +}; + // ================================= Header ================================= const Header: React.FC = () => { const [, lang] = useLocale(); const { pkg } = useSiteData(); - const themeConfig = getThemeConfig(); + const isChineseMirror = + typeof window !== 'undefined' && typeof window.location !== 'undefined' + ? window.location.hostname.includes('.antgroup.com') + : false; + + const { data: versions = [], isLoading } = useSWR( + process.env.NODE_ENV === 'production' && typeof window !== 'undefined' + ? `${window.location.origin}/versions.json` + : null, + fetcher, + { + fallbackData: versionsFile, + errorRetryCount: 3, + }, + ); + + const versionOptions = useMemo(() => { + if (isLoading) { + return []; + } + return versions.map((item) => { + const isMatch = item.version.startsWith(pkg.version[0]); + const label = isMatch ? pkg.version : item.version; + const value = isChineseMirror && item.chineseMirrorUrl ? item.chineseMirrorUrl : item.url; + return { value, label }; + }); + }, [versions, isLoading, pkg.version, isChineseMirror]); const [headerState, setHeaderState] = useState({ menuVisible: false, windowWidth: 1400, searching: false, }); + const { direction, isMobile, bannerVisible, updateSiteConfig } = React.use(SiteContext); const pingTimer = useRef | null>(null); const location = useLocation(); @@ -258,14 +298,6 @@ const Header: React.FC = () => { ); const { menuVisible, windowWidth, searching } = headerState; - const docVersions: Record = { - [pkg.version]: pkg.version, - ...themeConfig?.docVersions, - }; - const versionOptions = Object.keys(docVersions).map((version) => ({ - value: docVersions[version], - label: version, - })); const isHome = ['', 'index', 'index-cn'].includes(pathname); const isZhCN = lang === 'cn'; @@ -308,6 +340,7 @@ const Header: React.FC = () => { key="version" size="small" variant="filled" + loading={isLoading} className={styles.versionSelect} defaultValue={pkg.version} onChange={handleVersionChange} diff --git a/.dumi/theme/themeConfig.ts b/.dumi/theme/themeConfig.ts index 480c6f4e9c..1b081ed856 100644 --- a/.dumi/theme/themeConfig.ts +++ b/.dumi/theme/themeConfig.ts @@ -1,6 +1,3 @@ -const chineseMirror = - typeof location !== 'undefined' && location.hostname.includes('.antgroup.com'); - export default { categoryOrder: { 'Ant Design': 0, @@ -45,15 +42,4 @@ export default { 模板文档: 3, 'Template Document': 3, }, - docVersions: { - '5.x': chineseMirror ? 'https://5x-ant-design.antgroup.com' : 'https://5x.ant.design', - '4.x': chineseMirror ? 'https://4x-ant-design.antgroup.com' : 'https://4x.ant.design', - '3.x': 'https://3x.ant.design', - '2.x': 'https://2x.ant.design', - '1.x': 'https://1x.ant.design', - '0.12.x': 'https://012x.ant.design', - '0.11.x': 'https://011x.ant.design', - '0.10.x': 'https://010x.ant.design', - '0.9.x': 'https://09x.ant.design', - }, }; diff --git a/.dumi/theme/utils/index.ts b/.dumi/theme/utils/index.ts index 39e286b26d..f66da9252f 100644 --- a/.dumi/theme/utils/index.ts +++ b/.dumi/theme/utils/index.ts @@ -3,7 +3,6 @@ import flattenDeep from 'lodash/flattenDeep'; import semver from 'semver'; import deprecatedVersions from '../../../BUG_VERSIONS.json'; -import themeConfig from '../themeConfig'; interface Meta { skip?: boolean; @@ -215,5 +214,3 @@ export function isOfficialHost(hostname: string) { const officialHostnames = ['ant.design', 'antgroup.com']; return officialHostnames.some((official) => hostname.includes(official)); } - -export const getThemeConfig = () => themeConfig; diff --git a/public/versions.json b/public/versions.json new file mode 100644 index 0000000000..a31a2e498a --- /dev/null +++ b/public/versions.json @@ -0,0 +1,45 @@ +[ + { + "version": "6.x", + "url": "https://ant.design", + "chineseMirrorUrl": "https://ant-design.antgroup.com" + }, + { + "version": "5.x", + "url": "https://5x.ant.design", + "chineseMirrorUrl": "https://5x-ant-design.antgroup.com" + }, + { + "version": "4.x", + "url": "https://4x.ant.design", + "chineseMirrorUrl": "https://4x-ant-design.antgroup.com" + }, + { + "version": "3.x", + "url": "https://3x.ant.design" + }, + { + "version": "2.x", + "url": "https://2x.ant.design" + }, + { + "version": "1.x", + "url": "https://1x.ant.design" + }, + { + "version": "0.12.x", + "url": "https://012x.ant.design" + }, + { + "version": "0.11.x", + "url": "https://011x.ant.design" + }, + { + "version": "0.10.x", + "url": "https://010x.ant.design" + }, + { + "version": "0.9.x", + "url": "https://09x.ant.design" + } +]