diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index 605cb00f63..de2d6eed8d 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -17,6 +17,7 @@ import CodeSandboxIcon from '../../common/CodeSandboxIcon'; import EditButton from '../../common/EditButton'; import ExternalLinkIcon from '../../common/ExternalLinkIcon'; import RiddleIcon from '../../common/RiddleIcon'; +import DemoContext from '../../slots/DemoContext'; import type { SiteContextProps } from '../../slots/SiteContext'; import SiteContext from '../../slots/SiteContext'; import { ping } from '../../utils'; @@ -107,6 +108,7 @@ const CodePreviewer: React.FC = (props) => { clientOnly, pkgDependencyList, } = props; + const { showDebug } = useContext(DemoContext); const { pkg } = useSiteData(); const location = useLocation(); @@ -469,26 +471,28 @@ createRoot(document.getElementById('container')).render(); -
{ - track({ type: 'codesandbox', demo: asset.id }); - codeSandboxIconRef.current?.submit(); - }} - > - - }> - - -
+ {showDebug && ( +
{ + track({ type: 'codesandbox', demo: asset.id }); + codeSandboxIconRef.current?.submit(); + }} + > + + }> + + +
+ )} }> { backdrop-filter: blur(8px); border-radius: ${token.borderRadius}px; box-sizing: border-box; - z-index: 1000; + margin-inline-end: calc(16px - 100vw + 100%); + z-index: 10; .toc-debug { color: ${token.purple6}; diff --git a/.dumi/theme/slots/Header/Logo.tsx b/.dumi/theme/slots/Header/Logo.tsx index 027eae1221..0d4a942fd5 100644 --- a/.dumi/theme/slots/Header/Logo.tsx +++ b/.dumi/theme/slots/Header/Logo.tsx @@ -1,6 +1,7 @@ +import * as React from 'react'; import { createStyles } from 'antd-style'; import { Link, useLocation } from 'dumi'; -import * as React from 'react'; + import * as utils from '../../utils'; const useStyle = createStyles(({ token, css }) => { diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx index 9b81cea26c..6a4541c741 100644 --- a/.dumi/theme/slots/Header/Navigation.tsx +++ b/.dumi/theme/slots/Header/Navigation.tsx @@ -1,13 +1,14 @@ import * as React from 'react'; -import { FormattedMessage, useFullSidebarData, useLocation } from 'dumi'; import { MenuOutlined } from '@ant-design/icons'; -import { createStyles, css } from 'antd-style'; import type { MenuProps } from 'antd'; import { Menu } from 'antd'; -import * as utils from '../../utils'; -import type { SharedProps } from './interface'; +import { createStyles, css } from 'antd-style'; +import { FormattedMessage, useFullSidebarData, useLocation } from 'dumi'; + import useLocale from '../../../hooks/useLocale'; import Link from '../../common/Link'; +import * as utils from '../../utils'; +import type { SharedProps } from './interface'; // ============================= Theme ============================= const locales = { @@ -65,7 +66,7 @@ const useStyle = createStyles(({ token }) => { position: absolute; inset: 0; background-color: transparent; - content: ""; + content: ''; } } @@ -114,14 +115,8 @@ export interface NavigationProps extends SharedProps { onDirectionChange: () => void; } -export default ({ - isZhCN, - isMobile, - responsive, - directionText, - onLangChange, - onDirectionChange, -}: NavigationProps) => { +const HeaderNavigation: React.FC = (props) => { + const { isZhCN, isMobile, responsive, directionText, onLangChange, onDirectionChange } = props; const { pathname, search } = useLocation(); const [locale] = useLocale(locales); @@ -132,11 +127,7 @@ export default ({ const menuMode = isMobile ? 'inline' : 'horizontal'; - const module = pathname - .split('/') - .filter((path) => path) - .slice(0, -1) - .join('/'); + const module = pathname.split('/').filter(Boolean).slice(0, -1).join('/'); let activeMenuItem = module || 'home'; if (pathname.startsWith('/changelog')) { activeMenuItem = 'docs/react'; @@ -287,7 +278,8 @@ export default ({ className={styles.nav} disabledOverflow items={items} - style={{ borderRight: 0 }} /> ); }; + +export default HeaderNavigation; diff --git a/.dumi/theme/slots/Header/SwitchBtn.tsx b/.dumi/theme/slots/Header/SwitchBtn.tsx index c54d2e0d4c..06a651387a 100644 --- a/.dumi/theme/slots/Header/SwitchBtn.tsx +++ b/.dumi/theme/slots/Header/SwitchBtn.tsx @@ -1,7 +1,7 @@ -import { createStyles } from 'antd-style'; import React from 'react'; -import classNames from 'classnames'; import { Tooltip } from 'antd'; +import { createStyles } from 'antd-style'; +import classNames from 'classnames'; export interface LangBtnProps { label1: React.ReactNode; diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 3b2978c737..df610cff5f 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -39,7 +39,6 @@ const locales = { const useStyle = createStyles(({ token, css }) => { const searchIconColor = '#ced4d9'; - return { header: css` position: sticky; @@ -102,12 +101,10 @@ const useStyle = createStyles(({ token, css }) => { display: flex; align-items: center; margin: 0; - + column-gap: 12px; > * { flex: none; margin: 0; - margin-inline-end: 12px; - &:last-child { margin-inline-end: 40px; } @@ -118,7 +115,6 @@ const useStyle = createStyles(({ token, css }) => { `, popoverMenu: { width: 300, - [`${token.antCls}-popover-inner-content`]: { padding: 0, }, @@ -130,16 +126,19 @@ const useStyle = createStyles(({ token, css }) => { user-select: none; `, link: css` - margin-left: 10px; - + margin-inline-start: 10px; @media only screen and (max-width: ${token.mobileMaxWidth}px) { - margin-left: 0; + margin-inline-start: 0; } `, - icon: css` - margin-right: 10px; - width: 22px; - height: 22px; + versionSelect: css` + min-width: 90px; + .rc-virtual-list { + .rc-virtual-list-holder { + scrollbar-width: thin; + scrollbar-color: unset; + } + } `, }; }); @@ -299,8 +298,8 @@ const Header: React.FC = () => { navigationNode,