site: optimize site style in mobile (#43895)

* site: ptimize site style in mobile

* fix

.dumi/pages/index/components/ComponentsList.tsx

@@ -233,7 +233,7 @@ export default function ComponentsList() {
     [isMobile],
   );
 
-  const ComponentItem = ({ title, node, type, index }: ComponentItemProps) => {
+  const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index }) => {
     const tagColor = type === 'new' ? 'processing' : 'warning';
     const tagText = type === 'new' ? locale.new : locale.update;
 

.dumi/pages/index/components/Theme/index.tsx

@@ -461,13 +461,14 @@ export default function Theme() {
               />
             </Sider>
             <Layout className={styles.transBg} style={{ padding: '0 24px 24px' }}>
-              <Breadcrumb style={{ margin: '16px 0' }}>
+              <Breadcrumb
-                <Breadcrumb.Item>
+                style={{ margin: '16px 0' }}
-                  <HomeOutlined />
+                items={[
-                </Breadcrumb.Item>
+                  { title: <HomeOutlined /> },
-                <Breadcrumb.Item menu={{ items: subMenuItems }}>Design</Breadcrumb.Item>
+                  { title: 'Design', menu: { items: subMenuItems } },
-                <Breadcrumb.Item>Themes</Breadcrumb.Item>
+                  { title: 'Themes' },
-              </Breadcrumb>
+                ]}
+              />
               <Content>
                 <Typography.Title level={2}>{locale.customizeTheme}</Typography.Title>
                 <Card

.dumi/theme/common/PrevAndNext.tsx

@@ -1,11 +1,13 @@
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { createStyles } from 'antd-style';
 import type { ReactElement } from 'react';
-import React, { useMemo } from 'react';
+import React, { useMemo, useContext } from 'react';
 import classNames from 'classnames';
 import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 import type { MenuProps } from 'antd';
 import useMenu from '../../hooks/useMenu';
+import SiteContext from '../slots/SiteContext';
+import type { SiteContextProps } from '../slots/SiteContext';
 
 const useStyle = createStyles(({ token, css }) => {
   const { colorSplit, iconCls, fontSizeIcon } = token;
@@ -111,6 +113,8 @@ const PrevAndNext: React.FC<{ rtl?: boolean }> = ({ rtl }) => {
 
   const [menuItems, selectedKey] = useMenu({ before, after });
 
+  const { isMobile } = useContext<SiteContextProps>(SiteContext);
+
   const [prev, next] = useMemo(() => {
     const flatMenu = flattenMenu(menuItems);
     if (!flatMenu) {
@@ -128,6 +132,10 @@ const PrevAndNext: React.FC<{ rtl?: boolean }> = ({ rtl }) => {
     ];
   }, [menuItems, selectedKey]);
 
+  if (isMobile) {
+    return null;
+  }
+
   return (
     <section className={styles.prevNextNav}>
       {prev &&

.dumi/theme/slots/Content/index.tsx

@@ -43,6 +43,9 @@ const useStyle = createStyles(({ token, css }) => {
         }
       }
     `,
+    listMobile: css`
+      margin: 1em 0 !important;
+    `,
     toc: css`
       ${antCls}-anchor {
         ${antCls}-anchor-link-title {
@@ -114,7 +117,7 @@ const AvatarPlaceholder: React.FC<{ num?: number }> = ({ num = 3 }) => (
   </li>
 );
 
-const AuthorAvatar = ({ name, avatar }: { name: string; avatar: string }) => {
+const AuthorAvatar: React.FC<{ name: string; avatar: string }> = ({ name, avatar }) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
   useLayoutEffect(() => {
@@ -123,9 +126,12 @@ const AuthorAvatar = ({ name, avatar }: { name: string; avatar: string }) => {
     img.onload = () => setLoading(false);
     img.onerror = () => setError(true);
   }, []);
-
+  if (error) {
-  if (error) return null;
+    return null;
-  if (loading) return <Skeleton.Avatar size="small" active />;
+  }
+  if (loading) {
+    return <Skeleton.Avatar size="small" active />;
+  }
   return (
     <Avatar size="small" src={avatar} alt={name}>
       {name}
@@ -140,7 +146,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
   const { formatMessage } = useIntl();
   const { styles } = useStyle();
   const token = useTheme();
-  const { direction } = useContext(SiteContext);
+  const { direction, isMobile } = useContext(SiteContext);
 
   const [showDebug, setShowDebug] = useLayoutState(false);
   const debugDemos = useMemo(
@@ -178,15 +184,6 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
 
   const isRTL = direction === 'rtl';
 
-  // support custom author info in frontmatter
-  // e.g.
-  // ---
-  // author:
-  //   - name: qixian
-  //     avatar: https://avatars.githubusercontent.com/u/11746742?v=4
-  //   - name: yutingzhao1991
-  //     avatar: https://avatars.githubusercontent.com/u/5378891?v=4
-  // ---
   const mergedAuthorInfos = useMemo(() => {
     const { author } = meta.frontmatter;
     if (!author) {
@@ -286,10 +283,10 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
           )}
           {meta.frontmatter.filename && (
             <ContributorsList
+              cache
               repo="ant-design"
               owner="ant-design"
-              className={styles.contributorsList}
+              className={classNames(styles.contributorsList, { [styles.listMobile]: isMobile })}
-              cache
               fileName={meta.frontmatter.filename}
               renderItem={(item, loading) => {
                 if (!item || loading) {

components/modal/useModal/index.tsx

@@ -112,7 +112,6 @@ function useModal(): readonly [
     }),
     [],
   );
-
   return [fns, <ElementsHolder key="modal-holder" ref={holderRef} />] as const;
 }