diff --git a/.dumi/pages/index/components/ComponentsList.tsx b/.dumi/pages/index/components/ComponentsList.tsx index 6da4f16c34..4885c7a0ba 100644 --- a/.dumi/pages/index/components/ComponentsList.tsx +++ b/.dumi/pages/index/components/ComponentsList.tsx @@ -90,6 +90,48 @@ const useStyle = createStyles(({ token }) => { }; }); +const ComponentItem: React.FC = ({ 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 ( +
+ {/* Decorator */} +
+ + {/* Title */} + + + {title} + + {tagText} + + +
+ {node} +
+
+ ); +}; + interface ComponentItemProps { title: React.ReactNode; node: React.ReactNode; @@ -233,44 +275,6 @@ export default function ComponentsList() { [isMobile], ); - const ComponentItem: React.FC = ({ title, node, type, index }) => { - const tagColor = type === 'new' ? 'processing' : 'warning'; - const tagText = type === 'new' ? locale.new : locale.update; - - return ( -
- {/* Decorator */} -
- - {/* Title */} - - - {title} - - {tagText} - - -
- {node} -
-
- ); - }; - return isMobile ? (
diff --git a/.dumi/theme/SiteThemeProvider.tsx b/.dumi/theme/SiteThemeProvider.tsx index 19ca828ff4..609f44f4a1 100644 --- a/.dumi/theme/SiteThemeProvider.tsx +++ b/.dumi/theme/SiteThemeProvider.tsx @@ -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 = ({ children, theme, ...rest }) /** 96 */ marginFar: token.marginXXL * 2, codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`, + contentMarginTop: 40, }} > {children} diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx index d366d5128f..2347962cb1 100644 --- a/.dumi/theme/builtins/ComponentOverview/index.tsx +++ b/.dumi/theme/builtins/ComponentOverview/index.tsx @@ -139,7 +139,7 @@ const Overview: React.FC = () => { return (
- +
{ 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(false); - const token = useTheme(); const { borderRadius, colorBgContainer } = token; const affixedStyle: CSSProperties = { @@ -124,7 +124,7 @@ const IconSearch: React.FC = () => { return (
- +
= (props) => { const isHappyWork = value.includes('happy-work'); return ( - } aria-label="Theme Switcher"> + } + aria-label="Theme Switcher" + badge={{ dot: true }} + style={{ zIndex: 1010 }} + > = (props) => { } /> */} } type={isHappyWork ? 'primary' : 'default'} onClick={() => { diff --git a/.dumi/theme/layouts/SidebarLayout/index.tsx b/.dumi/theme/layouts/SidebarLayout/index.tsx index dd07bd5771..42402dff08 100644 --- a/.dumi/theme/layouts/SidebarLayout/index.tsx +++ b/.dumi/theme/layouts/SidebarLayout/index.tsx @@ -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; `, })); diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx index e3848d3dd8..f7b40d048d 100644 --- a/.dumi/theme/slots/Content/index.tsx +++ b/.dumi/theme/slots/Content/index.tsx @@ -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 }) => { {!!meta.frontmatter.toc && ( - -
- ({ - 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: ( - - {child?.title} - - ), - })), - }))} - /> -
- +
+ ({ + 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: ( + + {child?.title} + + ), + })), + }))} + /> +
)}
{meta.frontmatter?.title ? ( diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 95c53e8bd7..ae41778b68 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -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; diff --git a/.dumi/theme/slots/Sidebar/index.tsx b/.dumi/theme/slots/Sidebar/index.tsx index 17fa42d4b9..f3979a2050 100644 --- a/.dumi/theme/slots/Sidebar/index.tsx +++ b/.dumi/theme/slots/Sidebar/index.tsx @@ -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; } diff --git a/components/_util/PurePanel.tsx b/components/_util/PurePanel.tsx index 49e8b2c16e..4aae173e1d 100644 --- a/components/_util/PurePanel.tsx +++ b/components/_util/PurePanel.tsx @@ -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 ( + + + + ); + }; +} + export interface BaseProps { prefixCls?: string; style?: React.CSSProperties; @@ -16,7 +33,7 @@ export default function genPurePanel( ) { type WrapProps = Omit & { open?: boolean }; - return function PurePanel(props: WrapProps) { + function PurePanel(props: WrapProps) { const { prefixCls: customizePrefixCls, style } = props; const holderRef = React.useRef(null); @@ -75,24 +92,18 @@ export default function genPurePanel( } return ( - -
- -
- + +
); - } as typeof Component; + } + + return withPureRenderTheme(PurePanel); } diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index c769090335..155e82a306 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -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. diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index 04dba9e55d..2be00c5bd5 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -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 --- 新的包裹组件，提供重置样式和提供消费上下文的默认环境。 diff --git a/components/float-button/index.en-US.md b/components/float-button/index.en-US.md index 408ff9704c..9d44304775 100644 --- a/components/float-button/index.en-US.md +++ b/components/float-button/index.en-US.md @@ -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`. diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md index 244ddfde39..165cb98726 100644 --- a/components/float-button/index.zh-CN.md +++ b/components/float-button/index.zh-CN.md @@ -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` 版本开始提供该组件。 diff --git a/components/modal/PurePanel.tsx b/components/modal/PurePanel.tsx index 6c6ce91dd9..e28edce6a1 100644 --- a/components/modal/PurePanel.tsx +++ b/components/modal/PurePanel.tsx @@ -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, @@ -80,4 +81,4 @@ const PurePanel: React.FC = (props) => { ); }; -export default PurePanel; +export default withPureRenderTheme(PurePanel); diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md index 0b97d960e1..70c2912172 100644 --- a/components/qr-code/index.en-US.md +++ b/components/qr-code/index.en-US.md @@ -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`. diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index d12ac6cdda..b14cd3b2aa 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -9,6 +9,7 @@ demo: group: title: 数据展示 order: 5 +tag: New --- 能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置，自 `antd@5.1.0` 版本开始提供该组件。 diff --git a/components/tour/PurePanel.tsx b/components/tour/PurePanel.tsx index a6bb5e0b95..f55153f934 100644 --- a/components/tour/PurePanel.tsx +++ b/components/tour/PurePanel.tsx @@ -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 = (props) => { ); }; -export default PurePanel; +export default withPureRenderTheme(PurePanel); diff --git a/components/tour/index.en-US.md b/components/tour/index.en-US.md index 7d8cac9df5..afbabbf7e9 100644 --- a/components/tour/index.en-US.md +++ b/components/tour/index.en-US.md @@ -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`. diff --git a/components/tour/index.zh-CN.md b/components/tour/index.zh-CN.md index 8391c35e74..3e09e4d85d 100644 --- a/components/tour/index.zh-CN.md +++ b/components/tour/index.zh-CN.md @@ -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` 版本开始提供该组件。 diff --git a/components/watermark/index.en-US.md b/components/watermark/index.en-US.md index 4d19d3bec2..feafa17f4d 100644 --- a/components/watermark/index.en-US.md +++ b/components/watermark/index.en-US.md @@ -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 diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md index 3542be63b4..7fbe6b8947 100644 --- a/components/watermark/index.zh-CN.md +++ b/components/watermark/index.zh-CN.md @@ -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 --- 给页面的某个区域加上水印。