Alex Zhu
4 weeks ago
committed by
GitHub
GitHub
7 changed files with 161 additions and 142 deletions
@ -1,20 +1,130 @@ |
|||
import { QuestionCircleOutlined } from '@ant-design/icons'; |
|||
import { history, SelectLang as UmiSelectLang } from '@umijs/max'; |
|||
import { |
|||
BookOutlined, |
|||
CheckOutlined, |
|||
ForkOutlined, |
|||
GlobalOutlined, |
|||
} from '@ant-design/icons'; |
|||
import { getAllLocales, getLocale, history, setLocale } from '@umijs/max'; |
|||
import type { MenuProps } from 'antd'; |
|||
import { Button, Tooltip } from 'antd'; |
|||
import { createStyles } from 'antd-style'; |
|||
import React, { useMemo } from 'react'; |
|||
import HeaderDropdown from '../HeaderDropdown'; |
|||
|
|||
export type SiderTheme = 'light' | 'dark'; |
|||
export const localeLabelMap: Record<string, { emoji: string; label: string }> = |
|||
{ |
|||
'zh-CN': { emoji: '🇨🇳', label: '简体中文' }, |
|||
'zh-TW': { emoji: '🇭🇰', label: '繁體中文' }, |
|||
'en-US': { emoji: '🇺🇸', label: 'English' }, |
|||
'ja-JP': { emoji: '🇯🇵', label: '日本語' }, |
|||
'pt-BR': { emoji: '🇧🇷', label: 'Português' }, |
|||
'id-ID': { emoji: '🇮🇩', label: 'Bahasa Indonesia' }, |
|||
'fa-IR': { emoji: '🇮🇷', label: 'فارسی' }, |
|||
'bn-BD': { emoji: '🇧🇩', label: 'বাংলা' }, |
|||
}; |
|||
|
|||
export const SelectLang: React.FC = () => { |
|||
return <UmiSelectLang />; |
|||
const useStyles = createStyles(({ token, css }) => ({ |
|||
action: css` |
|||
display: inline-flex !important; |
|||
align-items: center !important; |
|||
justify-content: center !important; |
|||
height: 36px !important; |
|||
min-width: 36px; |
|||
padding-inline: 8px !important; |
|||
padding-block: 0 !important; |
|||
border-radius: ${token.borderRadius}px !important; |
|||
`,
|
|||
})); |
|||
|
|||
export const DocLink: React.FC = () => { |
|||
const { styles } = useStyles(); |
|||
return ( |
|||
<Tooltip title="使用文档"> |
|||
<Button |
|||
type="text" |
|||
className={styles.action} |
|||
icon={<BookOutlined />} |
|||
aria-label="使用文档" |
|||
onClick={() => { |
|||
history.push('/welcome'); |
|||
}} |
|||
/> |
|||
</Tooltip> |
|||
); |
|||
}; |
|||
|
|||
const versionItems: MenuProps['items'] = [ |
|||
{ key: 'https://v5.pro.ant.design', label: 'v5' }, |
|||
{ key: 'https://v4.pro.ant.design', label: 'v4' }, |
|||
{ key: 'https://v2.pro.ant.design', label: 'v2' }, |
|||
{ key: 'https://v1.pro.ant.design', label: 'v1' }, |
|||
]; |
|||
|
|||
const onVersionClick: MenuProps['onClick'] = ({ key }) => { |
|||
window.open(key, '_blank', 'noopener,noreferrer'); |
|||
}; |
|||
|
|||
export const VersionDropdown: React.FC = () => { |
|||
const { styles } = useStyles(); |
|||
return ( |
|||
<HeaderDropdown |
|||
placement="bottomRight" |
|||
arrow |
|||
menu={{ |
|||
selectedKeys: [], |
|||
onClick: onVersionClick, |
|||
items: versionItems, |
|||
style: { minWidth: 100 }, |
|||
}} |
|||
> |
|||
<Button type="text" className={styles.action} aria-label="历史版本"> |
|||
<ForkOutlined /> |
|||
</Button> |
|||
</HeaderDropdown> |
|||
); |
|||
}; |
|||
|
|||
export const Question: React.FC = () => { |
|||
export const LangDropdown: React.FC = () => { |
|||
const { styles } = useStyles(); |
|||
const allLocales = useMemo(() => getAllLocales(), []); |
|||
const currentLocale = getLocale(); |
|||
const supportLocales = allLocales.filter((l) => l in localeLabelMap); |
|||
|
|||
if (supportLocales.length <= 1) { |
|||
return null; |
|||
} |
|||
|
|||
const langItems: MenuProps['items'] = supportLocales.map((locale) => ({ |
|||
key: `lang-${locale}`, |
|||
icon: |
|||
locale === currentLocale ? ( |
|||
<CheckOutlined style={{ color: '#52c41a' }} /> |
|||
) : ( |
|||
<span style={{ display: 'inline-block', width: 14 }} /> |
|||
), |
|||
label: `${localeLabelMap[locale]?.emoji ?? ''} ${localeLabelMap[locale]?.label ?? locale}`, |
|||
})); |
|||
|
|||
const onLangClick: MenuProps['onClick'] = ({ key }) => { |
|||
if (key.startsWith('lang-')) { |
|||
setLocale(key.replace('lang-', ''), false); |
|||
} |
|||
}; |
|||
|
|||
return ( |
|||
<span |
|||
onClick={() => { |
|||
history.push('/welcome'); |
|||
<HeaderDropdown |
|||
placement="bottomRight" |
|||
arrow |
|||
menu={{ |
|||
selectedKeys: [`lang-${currentLocale}`], |
|||
onClick: onLangClick, |
|||
items: langItems, |
|||
style: { minWidth: 180 }, |
|||
}} |
|||
> |
|||
<QuestionCircleOutlined /> |
|||
</span> |
|||
<Button type="text" className={styles.action} aria-label="语言切换"> |
|||
<GlobalOutlined /> |
|||
</Button> |
|||
</HeaderDropdown> |
|||
); |
|||
}; |
|||
|
|||
@ -1,22 +0,0 @@ |
|||
import { Link, useIntl } from '@umijs/max'; |
|||
import { Button, Card, Result } from 'antd'; |
|||
import React from 'react'; |
|||
|
|||
const NoFoundPage: React.FC = () => ( |
|||
<Card variant="borderless"> |
|||
<Result |
|||
status="404" |
|||
title="404" |
|||
subTitle={useIntl().formatMessage({ id: 'pages.404.subTitle' })} |
|||
extra={ |
|||
<Link to="/" prefetch> |
|||
<Button type="primary"> |
|||
{useIntl().formatMessage({ id: 'pages.404.buttonText' })} |
|||
</Button> |
|||
</Link> |
|||
} |
|||
/> |
|||
</Card> |
|||
); |
|||
|
|||
export default NoFoundPage; |
|||
@ -1,17 +1,25 @@ |
|||
import { Link } from '@umijs/max'; |
|||
import { Link, useIntl } from '@umijs/max'; |
|||
import { Button, Card, Result } from 'antd'; |
|||
import React from 'react'; |
|||
|
|||
export default () => ( |
|||
<Card variant="borderless"> |
|||
<Result |
|||
status="404" |
|||
title="404" |
|||
subTitle="Sorry, the page you visited does not exist." |
|||
extra={ |
|||
<Link to="/" prefetch> |
|||
<Button type="primary">Back Home</Button> |
|||
</Link> |
|||
} |
|||
/> |
|||
</Card> |
|||
); |
|||
const Exception404: React.FC = () => { |
|||
const intl = useIntl(); |
|||
return ( |
|||
<Card variant="borderless"> |
|||
<Result |
|||
status="404" |
|||
title="404" |
|||
subTitle={intl.formatMessage({ id: 'pages.404.subTitle' })} |
|||
extra={ |
|||
<Link to="/" prefetch> |
|||
<Button type="primary"> |
|||
{intl.formatMessage({ id: 'pages.404.buttonText' })} |
|||
</Button> |
|||
</Link> |
|||
} |
|||
/> |
|||
</Card> |
|||
); |
|||
}; |
|||
|
|||
export default Exception404; |
|||
|
|||
Loading…
Reference in new issue