diff --git a/.dumi/theme/slots/Content/ColumnCard.tsx b/.dumi/theme/slots/Content/ColumnCard.tsx
index 6dfc652863..11df995f3d 100644
--- a/.dumi/theme/slots/Content/ColumnCard.tsx
+++ b/.dumi/theme/slots/Content/ColumnCard.tsx
@@ -1,7 +1,8 @@
-import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons';
-import { createStyles } from 'antd-style';
 import React from 'react';
+import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons';
 import { Button, Card, Divider } from 'antd';
+import { createStyles } from 'antd-style';
+
 import useLocale from '../../../hooks/useLocale';
 import JuejinLogo from './JuejinLogo';
 
@@ -10,81 +11,81 @@ const ANTD_IMG_URL =
 
 const useStyle = createStyles(({ token, css }) => ({
   card: css`
-      width: 100%;
-      margin: 40px 0;
-      transition: all 0.2s;
-      background-color: ${token.colorFillQuaternary};
-    `,
+    width: 100%;
+    margin: 40px 0;
+    transition: all 0.2s;
+    background-color: ${token.colorFillQuaternary};
+  `,
   bigTitle: css`
-      font-size: 16px;
-      color: #121212;
-      margin-bottom: 24px;
-      font-weight: 600;
-    `,
+    font-size: 16px;
+    color: #121212;
+    margin-bottom: 24px;
+    font-weight: 600;
+  `,
   cardBody: css`
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    `,
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  `,
   left: css`
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      img {
-        width: 200px;
-        margin-right: 24px;
-        overflow: hidden;
-        border-radius: 8px;
-      }
-    `,
-  title: css`
-      color: #444;
-      font-size: 16px;
-      font-weight: 600;
-    `,
-  subTitle: css`
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      color: #646464;
-      font-size: 14px;
-      font-weight: 400;
-      margin-top: 8px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    img {
+      width: 200px;
+      margin-right: 24px;
       overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      .logo {
-        width: 24px;
-        height: 24px;
-        font-size: 24px;
-        &.zhihu-logo {
-          color: #056de8;
-        }
-        &.yuque-logo {
-          color: #00b96b;
-        }
-        &.juejin-logo {
-          color: #1e80ff;
-        }
+      border-radius: 8px;
+    }
+  `,
+  title: css`
+    color: #444;
+    font-size: 16px;
+    font-weight: 600;
+  `,
+  subTitle: css`
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    color: #646464;
+    font-size: 14px;
+    font-weight: 400;
+    margin-top: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    .logo {
+      width: 24px;
+      height: 24px;
+      font-size: 24px;
+      &.zhihu-logo {
+        color: #056de8;
       }
-      .arrowIcon {
-        margin: 0 8px;
-        color: #8a8f8d;
-        font-size: 12px;
+      &.yuque-logo {
+        color: #00b96b;
       }
-      .zl-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-        color: #646464;
+      &.juejin-logo {
+        color: #1e80ff;
       }
-    `,
-  btn: css`
+    }
+    .arrowIcon {
+      margin: 0 8px;
+      color: #8a8f8d;
+      font-size: 12px;
+    }
+    .zl-btn {
       display: flex;
-      justify-content: center;
       align-items: center;
-    `,
+      justify-content: center;
+      padding: 0;
+      color: #646464;
+    }
+  `,
+  btn: css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `,
 }));
 
 const locales = {
diff --git a/.dumi/theme/slots/Content/ContributorAvatar.tsx b/.dumi/theme/slots/Content/ContributorAvatar.tsx
index 933e06f53d..3d44385a1b 100644
--- a/.dumi/theme/slots/Content/ContributorAvatar.tsx
+++ b/.dumi/theme/slots/Content/ContributorAvatar.tsx
@@ -1,21 +1,30 @@
 import React from 'react';
+import type { AvatarListItem } from '@qixian.cs/github-contributors-list';
 import { Avatar, Skeleton, Tooltip } from 'antd';
 
 const AvatarPlaceholder: React.FC<{ num?: number }> = ({ num = 3 }) => (
   <li>
-    {Array.from({ length: num }).map((_, i) => (
-      <Skeleton.Avatar size="small" active key={i} style={{ marginLeft: i === 0 ? 0 : -8 }} />
+    {Array.from({ length: num }).map<React.ReactNode>((_, i) => (
+      <Skeleton.Avatar
+        size="small"
+        active
+        key={i}
+        style={{ marginInlineStart: i === 0 ? 0 : -8 }}
+      />
     ))}
   </li>
 );
 
 interface ContributorAvatarProps {
-  username?: string;
-  url?: string;
   loading?: boolean;
+  item?: AvatarListItem;
 }
 
-const ContributorAvatar: React.FC<ContributorAvatarProps> = ({ username, url, loading }) => {
+const ContributorAvatar: React.FC<ContributorAvatarProps> = (props) => {
+  const {
+    item: { username, url } = {},
+    loading,
+  } = props;
   if (loading) {
     return <AvatarPlaceholder />;
   }
diff --git a/.dumi/theme/slots/Content/Contributors.tsx b/.dumi/theme/slots/Content/Contributors.tsx
index 7b4be21510..7b1fa53c61 100644
--- a/.dumi/theme/slots/Content/Contributors.tsx
+++ b/.dumi/theme/slots/Content/Contributors.tsx
@@ -1,48 +1,40 @@
 import React, { useContext } from 'react';
+import ContributorsList from '@qixian.cs/github-contributors-list';
+import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import { useIntl } from 'dumi';
-import { createStyles } from 'antd-style';
-import ContributorsList from '@qixian.cs/github-contributors-list';
-import ContributorAvatar from './ContributorAvatar';
+
 import SiteContext from '../SiteContext';
+import ContributorAvatar from './ContributorAvatar';
 
-const useStyle = createStyles(({ token, css }) => {
-  const { antCls } = token;
-
-  return {
-    contributorsList: css`
+const useStyle = createStyles(({ token, css }) => ({
+  contributorsList: css`
     margin-top: 120px !important;
-    `,
-    listMobile: css`
-      margin: 1em 0 !important;
-    `,
-    title: css`
+  `,
+  listMobile: css`
+    margin: 1em 0 !important;
+  `,
+  title: css`
     font-size: 12px;
-    opacity: 0.45;
+    opacity: 0.5;
+    margin-bottom: 8px;
   `,
-    list: css`
-  display: flex;
-  flex-wrap: wrap;
-  clear: both;
-
-  li {
-    height: 24px;
-  }
-
-  li,
-  ${antCls}-avatar + ${antCls}-avatar {
-    transition: all ${token.motionDurationSlow};
-    margin-inline-end: -8px;
-  }
-  &:hover {
-    li,
-    ${antCls}-avatar {
-      margin-inline-end: 0;
+  list: css`
+    display: flex;
+    flex-wrap: wrap;
+    clear: both;
+    li {
+      height: 24px;
+      transition: all ${token.motionDurationSlow};
+      margin-inline-end: -8px;
+    }
+    &:hover {
+      li {
+        margin-inline-end: 0;
+      }
     }
-  }
   `,
-  };
-});
+}));
 
 interface ContributorsProps {
   filename?: string;
@@ -67,12 +59,7 @@ const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
         fileName={filename}
         className={styles.list}
         renderItem={(item, loading) => (
-          <ContributorAvatar
-            key={item?.username}
-            username={item?.username}
-            url={item?.url}
-            loading={loading}
-          />
+          <ContributorAvatar item={item} loading={loading} key={item?.url} />
         )}
       />
     </div>
diff --git a/.dumi/theme/slots/Content/DocAnchor.tsx b/.dumi/theme/slots/Content/DocAnchor.tsx
index c15d278e23..fae25f9b2d 100644
--- a/.dumi/theme/slots/Content/DocAnchor.tsx
+++ b/.dumi/theme/slots/Content/DocAnchor.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
-import classNames from 'classnames';
 import { Anchor } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
+import classNames from 'classnames';
 import { useRouteMeta, useTabMeta } from 'dumi';
 
 const useStyle = createStyles(({ token, css }) => {
diff --git a/.dumi/theme/slots/Content/DocMeta.tsx b/.dumi/theme/slots/Content/DocMeta.tsx
index b0de544ec4..dc2a84889d 100644
--- a/.dumi/theme/slots/Content/DocMeta.tsx
+++ b/.dumi/theme/slots/Content/DocMeta.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useLayoutEffect, useMemo } from 'react';
-import { Typography, Space, Skeleton, Avatar } from 'antd';
-import { useRouteMeta } from 'dumi';
-import DayJS from 'dayjs';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
 import { CalendarOutlined } from '@ant-design/icons';
+import { Avatar, Skeleton, Space, Typography } from 'antd';
+import DayJS from 'dayjs';
+import { useRouteMeta } from 'dumi';
 
 const AuthorAvatar: React.FC<{ name: string; avatar: string }> = ({ name, avatar }) => {
   const [loading, setLoading] = useState(true);
@@ -26,7 +26,7 @@ const AuthorAvatar: React.FC<{ name: string; avatar: string }> = ({ name, avatar
   );
 };
 
-const DocMeta: React.FC<{}> = () => {
+const DocMeta: React.FC = () => {
   const meta = useRouteMeta();
 
   const mergedAuthorInfos = useMemo(() => {
diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx
index 1036e7918f..63778e24bd 100644
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@@ -1,9 +1,9 @@
+import React, { Suspense, useContext, useLayoutEffect, useMemo } from 'react';
+import { Col, Skeleton, Space, Typography } from 'antd';
+import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import { FormattedMessage, useRouteMeta } from 'dumi';
-import type { ReactNode } from 'react';
-import React, { Suspense, useContext, useLayoutEffect, useMemo } from 'react';
-import { Col, Space, Typography, Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
+
 import useLayoutState from '../../../hooks/useLayoutState';
 import useLocation from '../../../hooks/useLocation';
 import type { DemoContextProps } from '../DemoContext';
@@ -21,22 +21,20 @@ const EditButton = React.lazy(() => import('../../common/EditButton'));
 
 const useStyle = createStyles(({ token, css }) => ({
   articleWrapper: css`
-      padding: 0 170px 32px 64px;
-
+    padding: 0 170px 32px 64px;
+    &.rtl {
+      padding: 0 64px 144px 170px;
+    }
+    @media only screen and (max-width: ${token.screenLG}px) {
+      &,
       &.rtl {
-        padding: 0 64px 144px 170px;
+        padding: 0 48px;
       }
-
-      @media only screen and (max-width: ${token.screenLG}px) {
-        &,
-        &.rtl {
-          padding: 0 48px;
-        }
-      }
-    `,
+    }
+  `,
 }));
 
-const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
+const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
   const meta = useRouteMeta();
   const { pathname, hash } = useLocation();
   const { direction } = useContext(SiteContext);