docs: component page document style beautify (#38557)

.dumi/theme/common/GlobalStyles.tsx

@@ -1443,15 +1443,6 @@ const GlobalStyles = () => {
           }
 
           @media only screen and (max-width: ${token.screenLG}px) {
-            .main-container {
-              padding-right: 48px;
-              padding-left: 48px;
-
-              .toc-affix {
-                display: none;
-              }
-            }
-
             .code-boxes-col-2-1,
             .code-boxes-col-1-1 {
               float: none;
@@ -1501,8 +1492,7 @@ const GlobalStyles = () => {
               border-right: 0;
             }
 
-            .main-container,
-            .ant-row-rtl .main-container {
+            .ant-row-rtl {
               margin-right: 0;
               margin-left: 0;
               padding-right: 16px;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, type FC, useMemo, useState, useLayoutEffect } from 'react';
+import React, { ReactNode, type FC, useMemo, useState, useLayoutEffect, useContext } from 'react';
 import { useIntl, useRouteMeta } from 'dumi';
 import Footer from 'dumi/theme/slots/Footer';
 import { Col, Typography, Avatar, Tooltip, Affix, Anchor } from 'antd';
@@ -11,6 +11,7 @@ import { css } from '@emotion/react';
 import PrevAndNext from '../../common/PrevAndNext';
 import DemoContext, { DemoContextProps } from '../DemoContext';
 import classNames from 'classnames';
+import SiteContext from '../SiteContext';
 
 const useStyle = () => {
   const { token } = useSiteToken();
@@ -73,6 +74,29 @@ const useStyle = () => {
         overflow: auto;
         padding-inline: 4px;
       }
+
+      &.rtl {
+        right: auto;
+        left: 20px;
+      }
+
+      @media only screen and (max-width: ${token.screenLG}px) {
+        display: none;
+      }
+    `,
+    articleWrapper: css`
+      padding: 0 170px 32px 64px;
+
+      &.rtl {
+        padding: 0 64px 144px 170px;
+      }
+
+      @media only screen and (max-width: ${token.screenLG}px) {
+        &, &.rtl {
+          padding-right: 48px;
+          padding-left: 48px;
+        }
+      }
     `,
   };
 };
@@ -88,6 +112,7 @@ const Content: FC<{ children: ReactNode }> = ({ children }) => {
   const { pathname } = useLocation();
   const { formatMessage } = useIntl();
   const styles = useStyle();
+  const { direction } = useContext(SiteContext);
 
   const [showDebug, setShowDebug] = useState(false);
   const [debugDemos, setDebugDemos] = useState<string[]>([]);
@@ -116,37 +141,37 @@ const Content: FC<{ children: ReactNode }> = ({ children }) => {
     }, []);
   }, [meta.toc]);
 
+  const isRTL = direction === 'rtl';
+
   return (
     <DemoContext.Provider value={contextValue}>
       <Col xxl={20} xl={19} lg={18} md={18} sm={24} xs={24}>
         <Affix>
-          <div css={styles.tocWrapper}>
-            <div>
-              <Anchor css={styles.toc} affix={false} showInkInFixed>
-                {anchorItems.map((item) => (
-                  <Anchor.Link href={`#${item.id}`} title={item.title} key={item.id}>
-                    {item.children
-                      ?.filter((child) => showDebug || !debugDemos.includes(child.id))
-                      .map((child) => (
-                        <Anchor.Link
-                          href={`#${child.id}`}
-                          title={
-                            <span
-                              className={classNames(debugDemos.includes(child.id) && 'toc-debug')}
-                            >
-                              {child.title}
-                            </span>
-                          }
-                          key={child.id}
-                        />
-                      ))}
-                  </Anchor.Link>
-                ))}
-              </Anchor>
-            </div>
-          </div>
+          <section css={styles.tocWrapper} className={classNames({ rtl: isRTL })}>
+            <Anchor css={styles.toc} affix={false} showInkInFixed>
+              {anchorItems.map((item) => (
+                <Anchor.Link href={`#${item.id}`} title={item.title} key={item.id}>
+                  {item.children
+                    ?.filter((child) => showDebug || !debugDemos.includes(child.id))
+                    .map((child) => (
+                      <Anchor.Link
+                        href={`#${child.id}`}
+                        title={
+                          <span
+                            className={classNames(debugDemos.includes(child.id) && 'toc-debug')}
+                          >
+                            {child.title}
+                          </span>
+                        }
+                        key={child.id}
+                      />
+                    ))}
+                </Anchor.Link>
+              ))}
+            </Anchor>
+          </section>
         </Affix>
-        <div style={{ padding: '0 170px 32px 64px' }}>
+        <article css={styles.articleWrapper} className={classNames({ rtl: isRTL })}>
           <Typography.Title style={{ fontSize: 30 }}>
             {meta.frontmatter.title}
             {meta.frontmatter.subtitle && (
@@ -186,7 +211,7 @@ const Content: FC<{ children: ReactNode }> = ({ children }) => {
             repo="ant-design"
             owner="ant-design"
           />
-        </div>
+        </article>
         <PrevAndNext />
         <Footer />
       </Col>