docs: fix site style.

.dumi/pages/index/components/MainBanner.tsx

@@ -39,6 +39,10 @@ const useStyle = createStyles(({ token, css }) => {
       align-items: center;
       position: relative;
       font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif;
+
+      @media only screen and (max-width: ${token.mobileMaxWidth}px) {
+        height: calc(100vh - ${token.paddingLG}px);
+      }
     `,
     background: css`
       width: 100%;
@@ -51,8 +55,6 @@ const useStyle = createStyles(({ token, css }) => {
       height: 100%;
       max-height: calc(100vh - ${token.headerHeight * 2}px);
       position: relative;
-
-
     `,
     title: css`
       max-width: ${minBannerWidth}px;
@@ -68,6 +70,8 @@ const useStyle = createStyles(({ token, css }) => {
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        text-align: center;
+        gap: ${token.paddingXS}px;
       }
     `,
     lottie: css`
@@ -150,6 +154,10 @@ const useStyle = createStyles(({ token, css }) => {
       font-weight: 600;
       box-shadow: ${token.boxShadow};
       position: relative;
+
+      @media only screen and (max-width: ${token.mobileMaxWidth}px) {
+        padding: 0 ${token.paddingLG}px;
+      }
     `,
     startBtn: css`
       background: linear-gradient(90deg, #c7deff 0%, #ffffffd9 76%);

.dumi/pages/index/components/SceneIntroduction/index.tsx

@@ -1,10 +1,11 @@
-import { Button } from 'antd';
+import { Button, Carousel } from 'antd';
 import { createStyles } from 'antd-style';
 import classnames from 'classnames';
 import React from 'react';
 
 import useLocale from '../../../../hooks/useLocale';
 import Container from '../../common/Container';
+import SiteContext from '../SiteContext';
 import AssistantScene from './Assistant';
 import Independent from './Independent';
 import NestScene from './Nest';
@@ -51,8 +52,9 @@ const useStyle = createStyles(({ token, css }) => {
     `,
     content_bg: css`
       position: absolute;
-      top: -200px;
-      right: -150px;
+      top: 0;
+      right: 0;
+      transform: translate(10%, -20%);
     `,
     content: css`
       display: flex;
@@ -61,6 +63,15 @@ const useStyle = createStyles(({ token, css }) => {
       width: 100%;
       margin-top: ${token.pcContainerMargin / 2}px;
     `,
+    mobile_content: css`
+      background: #0c0e10cc;
+      border-radius: 24px;
+      margin: ${token.marginLG}px 0;
+
+      img {
+        width: 100%;
+      }
+    `,
     tab: css`
       width: 280px;
       display: flex;
@@ -134,24 +145,29 @@ const SceneBanner: React.FC = () => {
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
 
+  const { isMobile } = React.useContext(SiteContext);
+
   const tabItems = [
     {
       key: 'independent',
       title: locale.independent_title,
       desc: locale.independent_desc,
       content: <Independent />,
+      img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*YVjbTqbc7ngAAAAAAAAAAAAADgCCAQ/fmt.avif',
     },
     {
       key: 'assistant',
       title: locale.assistant_title,
       desc: locale.assistant_desc,
       content: <AssistantScene />,
+      img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*kCojRo0SoAAAAAAAAAAAAAAADgCCAQ/fmt.avif',
     },
     {
       key: 'nest',
       title: locale.nest_title,
       desc: locale.nest_desc,
       content: <NestScene />,
+      img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*krfsT5zBSuUAAAAAAAAAAAAADgCCAQ/fmt.avif',
     },
     {
       key: 'app',
@@ -175,27 +191,40 @@ const SceneBanner: React.FC = () => {
         src="https://mdn.alipayobjects.com/huamei_k0vkmw/afts/img/A*aSLTSr53DPAAAAAAAAAAAAAADsR-AQ/original"
         alt="bg"
       />
-      <div className={styles.content}>
-        <div className={styles.tab}>
-          {tabItems.map((item) => (
-            <Button
-              key={item.key}
-              disabled={item.disabled}
-              className={classnames(
-                styles.item,
-                active === item.key && styles['item-active'],
-                item.disabled && styles['item-disabled'],
-              )}
-              type="text"
-              onClick={genHandleActive(item.key)}
-            >
-              <h3 className={styles.item_title}>{item.title}</h3>
-              <p className={styles.item_desc}>{item.desc}</p>
-            </Button>
-          ))}
+      {isMobile ? (
+        <Carousel>
+          {tabItems.map(
+            (item) =>
+              item.img && (
+                <div className={styles.mobile_content}>
+                  <img src={item.img} alt="item.img" loading="lazy" />
+                </div>
+              ),
+          )}
+        </Carousel>
+      ) : (
+        <div className={styles.content}>
+          <div className={styles.tab}>
+            {tabItems.map((item) => (
+              <Button
+                key={item.key}
+                disabled={item.disabled}
+                className={classnames(
+                  styles.item,
+                  active === item.key && styles['item-active'],
+                  item.disabled && styles['item-disabled'],
+                )}
+                type="text"
+                onClick={genHandleActive(item.key)}
+              >
+                <h3 className={styles.item_title}>{item.title}</h3>
+                <p className={styles.item_desc}>{item.desc}</p>
+              </Button>
+            ))}
+          </div>
+          {!!activeContent && <div className={styles.tab_content}>{activeContent}</div>}
         </div>
-        {!!activeContent && <div className={styles.tab_content}>{activeContent}</div>}
-      </div>
+      )}
     </Container>
   );
 };

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -374,7 +374,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
 
   const codeBoxDemoStyle: React.CSSProperties = {
     padding: iframe || compact ? 0 : undefined,
-    overflow: iframe || compact ? 'hidden' : undefined,
+    overflow: iframe || compact ? 'hidden' : 'auto',
     backgroundColor: background === 'grey' ? backgroundGrey : undefined,
   };
 

.dumi/theme/slots/Header/index.tsx

@@ -2,7 +2,7 @@ import { CloseOutlined, MenuOutlined } from '@ant-design/icons';
 import { Button, Drawer } from 'antd';
 import { createStyles } from 'antd-style';
 import classnames from 'classnames';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import useLocale from '../../../hooks/useLocale';
 import useScrollY from '../../../hooks/useScrollY';
@@ -12,6 +12,7 @@ import HeaderActions from './Actions';
 import Logo from './Logo';
 import Navigation from './Navigation';
 
+import { useLocation } from 'dumi';
 import type { SiteContextProps } from '../SiteContext';
 import type { SharedProps } from './interface';
 
@@ -96,6 +97,8 @@ const useStyle = createStyles(({ token, css }) => {
 const Header: React.FC = () => {
   const [open, setOpen] = React.useState<boolean>(false);
   const [, lang] = useLocale();
+  const { pathname } = useLocation();
+
   const { direction, isMobile } = React.useContext<SiteContextProps>(SiteContext);
 
   const { styles } = useStyle();
@@ -113,6 +116,10 @@ const Header: React.FC = () => {
 
   let content = null;
 
+  useEffect(() => {
+    isMobile && setOpen(false);
+  }, [pathname]);
+
   if (isMobile) {
     content = (
       <Drawer