docs: fix site style and enhance user experience

.dumi/pages/index/common/Container.tsx

@@ -23,6 +23,10 @@ const useStyle = createStyles(({ token, css }) => {
       color: #fff;
       text-align: center;
       padding-bottom: ${token.padding}px;
+
+      @media only screen and (max-width: ${token.mobileMaxWidth}px) {
+        font-size: ${token.fontSizeHeading1}px;
+      }
     `,
     desc: css`
       color: ${token.colorTextSecondary};

.dumi/pages/index/components/DesignGuide.tsx

@@ -127,6 +127,10 @@ const useStyle = createStyles(({ token, css }) => {
       font-size: ${token.fontSizeHeading1 + 10}px;
       line-height: 56px;
       font-weight: bold;
+
+      @media only screen and (max-width: ${token.mobileMaxWidth}px) {
+        font-size: ${token.fontSizeHeading2}px;
+      }
     `,
     chain_item_desc: css`
       font-size: ${token.fontSizeHeading5}px;

.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';
@@ -48,11 +49,16 @@ const useStyle = createStyles(({ token, css }) => {
   return {
     container: css`
       position: relative;
+
+      @media screen and (max-width: ${token.mobileMaxWidth}px) {
+        height: 80vh;
+      }
     `,
     content_bg: css`
       position: absolute;
-      top: -200px;
-      right: -150px;
+      top: 0;
+      right: 0;
+      transform: translate(10%, -20%);
     `,
     content: css`
       display: flex;
@@ -61,6 +67,15 @@ const useStyle = createStyles(({ token, css }) => {
       width: 100%;
       margin-top: ${token.pcContainerMargin / 2}px;
     `,
+    mobile_content: css`
+      background: #0c0e10cc;
+      border-radius: 24px;
+      margin: ${token.marginXXL}px 0;
+
+      img {
+        width: 100%;
+      }
+    `,
     tab: css`
       width: 280px;
       display: flex;
@@ -134,24 +149,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 +195,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/layouts/GlobalLayout.tsx

@@ -51,12 +51,17 @@ const getAlgorithm = (themes: ThemeName[] = []) =>
 const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
   const { pathname } = useLocation();
+  const { token } = antdTheme.useToken();
   const [searchParams, setSearchParams] = useSearchParams();
   const [{ theme = [], direction, isMobile }, setSiteState] = useLayoutState<SiteState>({
     isMobile: false,
     direction: 'ltr',
     theme: [],
   });
+  const isIndexPage = React.useMemo(
+    () => pathname === '' || pathname.startsWith('/index'),
+    [pathname],
+  );
 
   const updateSiteConfig = useCallback(
     (props: SiteState) => {
@@ -97,6 +102,14 @@ const GlobalLayout: React.FC = () => {
     updateSiteConfig({ isMobile: window.innerWidth < RESPONSIVE_MOBILE });
   };
 
+  useEffect(() => {
+    const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+
+    if (metaThemeColor) {
+      metaThemeColor.setAttribute('content', isIndexPage ? '#0c0e10cc' : token.colorBgContainer);
+    }
+  }, [theme.length, isIndexPage]);
+
   useEffect(() => {
     const _theme = searchParams.getAll('theme') as ThemeName[];
     const _direction = searchParams.get('direction') as DirectionType;
@@ -131,10 +144,7 @@ const GlobalLayout: React.FC = () => {
   const themeConfig = React.useMemo<ThemeConfig>(
     () => ({
       // index page should always use dark theme
-      algorithm:
-        pathname.startsWith('/index') || pathname === ''
-          ? getAlgorithm(['dark'])
-          : getAlgorithm(theme),
+      algorithm: isIndexPage ? getAlgorithm(['dark']) : getAlgorithm(theme),
       token: { motion: !theme.includes('motion-off') },
       cssVar: true,
       hashed: false,

.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

docs/playground/independent.tsx

@@ -43,8 +43,9 @@ const useStyle = createStyles(({ token, css }) => {
   return {
     layout: css`
       width: 100%;
+      min-width: 1000px;
       height: 722px;
-      border-radius: 8px;
+      border-radius: ${token.borderRadius}px;
       display: flex;
       background: ${token.colorBgContainer};
       font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif;
@@ -72,7 +73,7 @@ const useStyle = createStyles(({ token, css }) => {
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
-      padding: 24px 0;
+      padding: ${token.paddingLG}px;
       gap: 16px;
     `,
     messages: css`