mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

docs: optimize site layout (#44111)

Browse Source 
* docs: sticky header

* docs: adjust floatbutton zindex

* chore: code clean
This commit is contained in:
MadCcc 2023-08-08 19:48:41 +08:00 committed by GitHub
parent 2f8fa45df3
commit 12efe328ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 138 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
.dumi/pages/index/components/ComponentsList.tsx
View File

@ -90,6 +90,48 @@ const useStyle = createStyles(({ token }) => {
};
});
const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index }) => {
const tagColor = type === 'new' ? 'processing' : 'warning';
const [locale] = useLocale(locales);
const tagText = type === 'new' ? locale.new : locale.update;
const { styles } = useStyle();
const { isMobile } = useContext(SiteContext);
const token = useTheme();
return (
<div className={classNames(styles.card, isMobile && styles.mobileCard)}>
{/* Decorator */}
<div
className={styles.cardCircle}
style={{
right: (index % 2) * -20 - 20,
bottom: (index % 3) * -40 - 20,
}}
/>
{/* Title */}
<Space>
<Typography.Title level={4} style={{ fontWeight: 'normal', margin: 0 }}>
{title}
</Typography.Title>
<Tag color={tagColor}>{tagText}</Tag>
</Space>
<div
style={{
marginTop: token.paddingLG,
flex: 'auto',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{node}
</div>
</div>
);
};
interface ComponentItemProps {
title: React.ReactNode;
node: React.ReactNode;
@ -233,44 +275,6 @@ export default function ComponentsList() {
[isMobile],
);
const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index }) => {
const tagColor = type === 'new' ? 'processing' : 'warning';
const tagText = type === 'new' ? locale.new : locale.update;
return (
<div key={index} className={classNames(styles.card, isMobile && styles.mobileCard)}>
{/* Decorator */}
<div
className={styles.cardCircle}
style={{
right: (index % 2) * -20 - 20,
bottom: (index % 3) * -40 - 20,
}}
/>
{/* Title */}
<Space>
<Typography.Title level={4} style={{ fontWeight: 'normal', margin: 0 }}>
{title}
</Typography.Title>
<Tag color={tagColor}>{tagText}</Tag>
</Space>
<div
style={{
marginTop: token.paddingLG,
flex: 'auto',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{node}
</div>
</div>
);
};
return isMobile ? (
<div style={{ margin: '0 16px' }}>
<Carousel className={styles.carousel}>

2
.dumi/theme/SiteThemeProvider.tsx
View File

@ -15,6 +15,7 @@ interface NewToken {
marginFarSM: number;
marginFar: number;
codeFamily: string;
contentMarginTop: number;
}
// 通过给 antd-style 扩展 CustomToken 对象类型定义，可以为 useTheme 中增加相应的 token 对象
@ -52,6 +53,7 @@ const SiteThemeProvider: FC<ThemeProviderProps> = ({ children, theme, ...rest })
/** 96 */
marginFar: token.marginXXL * 2,
codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
contentMarginTop: 40,
}}
>
{children}

2
.dumi/theme/builtins/ComponentOverview/index.tsx
View File

@ -139,7 +139,7 @@ const Overview: React.FC = () => {
return (
<section className="markdown" ref={sectionRef}>
<Divider />
<Affix offsetTop={24} onChange={setSearchBarAffixed}>
<Affix offsetTop={24 + token.headerHeight} onChange={setSearchBarAffixed}>
<div
className={styles.componentsOverviewAffix}
style={searchBarAffixed ? affixedStyle : {}}

4
.dumi/theme/builtins/IconSearch/IconSearch.tsx
View File

@ -58,6 +58,7 @@ const IconSearch: React.FC = () => {
searchKey: '',
theme: ThemeType.Outlined,
});
const token = useTheme();
const newIconNames: string[] = [];
@ -111,7 +112,6 @@ const IconSearch: React.FC = () => {
}, [displayState.searchKey, displayState.theme]);
const [searchBarAffixed, setSearchBarAffixed] = useState<boolean>(false);
const token = useTheme();
const { borderRadius, colorBgContainer } = token;
const affixedStyle: CSSProperties = {
@ -124,7 +124,7 @@ const IconSearch: React.FC = () => {
return (
<div className="markdown">
<Affix offsetTop={24} onChange={setSearchBarAffixed}>
<Affix offsetTop={24 + token.headerHeight} onChange={setSearchBarAffixed}>
<div className={styles.iconSearchAffix} style={searchBarAffixed ? affixedStyle : {}}>
<Segmented
size="large"

9
.dumi/theme/common/ThemeSwitch/index.tsx
View File

@ -24,7 +24,13 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
const isHappyWork = value.includes('happy-work');
return (
<FloatButton.Group trigger="click" icon={<ThemeIcon />} aria-label="Theme Switcher">
<FloatButton.Group
trigger="click"
icon={<ThemeIcon />}
aria-label="Theme Switcher"
badge={{ dot: true }}
style={{ zIndex: 1010 }}
>
<Link
to={getLocalizedPathname('/theme-editor', isZhCN(pathname), search)}
style={{ display: 'block', marginBottom: token.margin }}
@ -76,6 +82,7 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
}
/> */}
<FloatButton
badge={{ dot: true }}
icon={<SmileOutlined />}
type={isHappyWork ? 'primary' : 'default'}
onClick={() => {

4
.dumi/theme/layouts/SidebarLayout/index.tsx
View File

@ -5,10 +5,10 @@ import CommonHelmet from '../../common/CommonHelmet';
import Content from '../../slots/Content';
import Sidebar from '../../slots/Sidebar';
const useStyle = createStyles(({ css }) => ({
const useStyle = createStyles(({ css, token }) => ({
main: css`
display: flex;
margin-top: 40px;
margin-top: ${token.contentMarginTop}px;
`,
}));

59
.dumi/theme/slots/Content/index.tsx
View File

@ -6,7 +6,7 @@ import DayJS from 'dayjs';
import { FormattedMessage, useIntl, useRouteMeta, useTabMeta } from 'dumi';
import type { ReactNode } from 'react';
import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
import { Affix, Anchor, Avatar, Col, Skeleton, Space, Tooltip, Typography } from 'antd';
import { Anchor, Avatar, Col, Skeleton, Space, Tooltip, Typography } from 'antd';
import useLayoutState from '../../../hooks/useLayoutState';
import useLocation from '../../../hooks/useLocation';
import EditButton from '../../common/EditButton';
@ -55,16 +55,17 @@ const useStyle = createStyles(({ token, css }) => {
}
`,
tocWrapper: css`
position: absolute;
top: 8px;
position: fixed;
top: ${token.headerHeight + token.contentMarginTop}px;
inset-inline-end: 0;
width: 160px;
margin: 12px 0;
margin: 0 0 12px 0;
padding: 8px 0;
padding-inline: 4px 8px;
backdrop-filter: blur(8px);
border-radius: ${token.borderRadius}px;
box-sizing: border-box;
z-index: 1000;
.toc-debug {
color: ${token.purple6};
@ -206,32 +207,30 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
<DemoContext.Provider value={contextValue}>
<Col xxl={20} xl={19} lg={18} md={18} sm={24} xs={24}>
{!!meta.frontmatter.toc && (
<Affix>
<section className={styles.tocWrapper}>
<Anchor
className={styles.toc}
affix={false}
targetOffset={token.marginXXL}
showInkInFixed
items={anchorItems.map((item) => ({
href: `#${item.id}`,
title: item.title,
key: item.id,
children: item.children
?.filter((child) => showDebug || !debugDemos.includes(child.id))
.map((child) => ({
key: child.id,
href: `#${child.id}`,
title: (
<span className={classNames(debugDemos.includes(child.id) && 'toc-debug')}>
{child?.title}
</span>
),
})),
}))}
/>
</section>
</Affix>
<section className={styles.tocWrapper}>
<Anchor
className={styles.toc}
affix={false}
targetOffset={token.marginXXL}
showInkInFixed
items={anchorItems.map((item) => ({
href: `#${item.id}`,
title: item.title,
key: item.id,
children: item.children
?.filter((child) => showDebug || !debugDemos.includes(child.id))
.map((child) => ({
key: child.id,
href: `#${child.id}`,
title: (
<span className={classNames(debugDemos.includes(child.id) && 'toc-debug')}>
{child?.title}
</span>
),
})),
}))}
/>
</section>
)}
<article className={classNames(styles.articleWrapper, { rtl: isRTL })}>
{meta.frontmatter?.title ? (

6
.dumi/theme/slots/Header/index.tsx
View File

@ -25,11 +25,13 @@ const useStyle = createStyles(({ token, css }) => {
return {
header: css`
position: relative;
z-index: 10;
position: sticky;
top: 0;
z-index: 1000;
max-width: 100%;
background: ${token.colorBgContainer};
box-shadow: ${token.boxShadowTertiary};
backdrop-filter: blur(8px);
@media only screen and (max-width: ${token.mobileMaxWidth}px) {
text-align: center;

4
.dumi/theme/slots/Sidebar/index.tsx
View File

@ -105,10 +105,10 @@ const useStyle = createStyles(({ token, css }) => {
.main-menu-inner {
position: sticky;
top: 0;
top: ${token.headerHeight + token.contentMarginTop}px;
width: 100%;
height: 100%;
max-height: 100vh;
max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px);
overflow: hidden;
}

47
components/_util/PurePanel.tsx
View File

@ -2,6 +2,23 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
import * as React from 'react';
import ConfigProvider, { ConfigContext } from '../config-provider';
export function withPureRenderTheme(Component: any) {
return function PureRenderThemeComponent(props: any) {
return (
<ConfigProvider
theme={{
token: {
motion: false,
zIndexPopupBase: 0,
},
}}
>
<Component {...props} />
</ConfigProvider>
);
};
}
export interface BaseProps {
prefixCls?: string;
style?: React.CSSProperties;
@ -16,7 +33,7 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
) {
type WrapProps = Omit<ComponentProps, 'open' | 'visible'> & { open?: boolean };
return function PurePanel(props: WrapProps) {
function PurePanel(props: WrapProps) {
const { prefixCls: customizePrefixCls, style } = props;
const holderRef = React.useRef<HTMLDivElement>(null);
@ -75,24 +92,18 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
}
return (
<ConfigProvider
theme={{
token: {
motion: false,
},
<div
ref={holderRef}
style={{
paddingBottom: popupHeight,
position: 'relative',
minWidth: popupWidth,
}}
>
<div
ref={holderRef}
style={{
paddingBottom: popupHeight,
position: 'relative',
minWidth: popupWidth,
}}
>
<Component {...mergedProps} />
</div>
</ConfigProvider>
<Component {...mergedProps} />
</div>
);
} as typeof Component;
}
return withPureRenderTheme(PurePanel);
}

1
components/app/index.en-US.md
View File

@ -6,6 +6,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAA
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
tag: New
---
Application wrapper for some global usages.

1
components/app/index.zh-CN.md
View File

@ -7,6 +7,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAA
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
tag: New
---
新的包裹组件，提供重置样式和提供消费上下文的默认环境。

3
components/float-button/index.en-US.md
View File

@ -1,11 +1,12 @@
---
category: Components
group: Other
group: General
title: FloatButton
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HS-wTIIwu0kAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a0hwTY_rOSUAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
tag: New
---
FloatButton. Available since `5.0.0`.

3
components/float-button/index.zh-CN.md
View File

@ -1,12 +1,13 @@
---
category: Components
group: 其他
group: 通用
subtitle: 悬浮按钮
title: FloatButton
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HS-wTIIwu0kAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a0hwTY_rOSUAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
tag: New
---
悬浮按钮。自 `5.0.0` 版本开始提供该组件。

3
components/modal/PurePanel.tsx
View File

@ -9,6 +9,7 @@ import { ConfirmContent } from './ConfirmDialog';
import type { ModalFuncProps } from './interface';
import { Footer, renderCloseIcon } from './shared';
import useStyle from './style';
import { withPureRenderTheme } from '../_util/PurePanel';
export interface PurePanelProps
extends Omit<PanelProps, 'prefixCls'>,
@ -80,4 +81,4 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
);
};
export default PurePanel;
export default withPureRenderTheme(PurePanel);

1
components/qr-code/index.en-US.md
View File

@ -8,6 +8,7 @@ demo:
group:
title: Data Display
order: 5
tag: New
---
Components that can convert text into QR codes, and support custom color and logo. Available since `antd@5.1.0`.

1
components/qr-code/index.zh-CN.md
View File

@ -9,6 +9,7 @@ demo:
group:
title: 数据展示
order: 5
tag: New
---
能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置，自 `antd@5.1.0` 版本开始提供该组件。

3
components/tour/PurePanel.tsx
View File

@ -5,6 +5,7 @@ import { RawPurePanel as PopoverRawPurePanel } from '../popover/PurePanel';
import type { TourStepProps } from './interface';
import TourPanel from './panelRender';
import useStyle from './style';
import { withPureRenderTheme } from '../_util/PurePanel';
export interface PurePanelProps extends TourStepProps {}
@ -36,4 +37,4 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
);
};
export default PurePanel;
export default withPureRenderTheme(PurePanel);

1
components/tour/index.en-US.md
View File

@ -6,6 +6,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8CC_Tbe3_e4AAAAAAA
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6hQpM0XtEAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
tag: New
---
A popup component for guiding users through a product. Available since `5.0.0`.

1
components/tour/index.zh-CN.md
View File

@ -7,6 +7,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8CC_Tbe3_e4AAAAAAA
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6hQpM0XtEAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
tag: New
---
用于分步引导用户了解产品功能的气泡组件。自 `5.0.0` 版本开始提供该组件。

2
components/watermark/index.en-US.md
View File

@ -1,6 +1,6 @@
---
category: Components
group: Other
group: Feedback
title: Watermark
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original

3
components/watermark/index.zh-CN.md
View File

@ -1,12 +1,13 @@
---
category: Components
subtitle: 水印
group: 其他
group: 反馈
title: Watermark
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 1
tag: New
---
给页面的某个区域加上水印。