site: site style optimization (ant-design#48088)

* site: site style optimization

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

Co-authored-by: MadCcc <[email protected]>
Signed-off-by: lijianan <[email protected]>

---------

Signed-off-by: lijianan <[email protected]>
Co-authored-by: MadCcc <[email protected]>

Author: li-jia-nan

.dumi/theme/slots/Header/Logo.tsx

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { createStyles } from 'antd-style';
 import { Link, useLocation } from 'dumi';
-import * as React from 'react';
+
 import * as utils from '../../utils';
 
 const useStyle = createStyles(({ token, css }) => {

.dumi/theme/slots/Header/Navigation.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { FormattedMessage, useFullSidebarData, useLocation } from 'dumi';
 import { MenuOutlined } from '@ant-design/icons';
-import { createStyles, css } from 'antd-style';
 import type { MenuProps } from 'antd';
 import { Menu } from 'antd';
-import * as utils from '../../utils';
-import type { SharedProps } from './interface';
+import { createStyles, css } from 'antd-style';
+import { FormattedMessage, useFullSidebarData, useLocation } from 'dumi';
+
 import useLocale from '../../../hooks/useLocale';
 import Link from '../../common/Link';
+import * as utils from '../../utils';
+import type { SharedProps } from './interface';
 
 // ============================= Theme =============================
 const locales = {
@@ -65,7 +66,7 @@ const useStyle = createStyles(({ token }) => {
             position: absolute;
             inset: 0;
             background-color: transparent;
-            content: "";
+            content: '';
           }
         }
 
@@ -114,14 +115,8 @@ export interface NavigationProps extends SharedProps {
   onDirectionChange: () => void;
 }
 
-export default ({
-  isZhCN,
-  isMobile,
-  responsive,
-  directionText,
-  onLangChange,
-  onDirectionChange,
-}: NavigationProps) => {
+const HeaderNavigation: React.FC<NavigationProps> = (props) => {
+  const { isZhCN, isMobile, responsive, directionText, onLangChange, onDirectionChange } = props;
   const { pathname, search } = useLocation();
   const [locale] = useLocale(locales);
 
@@ -132,11 +127,7 @@ export default ({
 
   const menuMode = isMobile ? 'inline' : 'horizontal';
 
-  const module = pathname
-    .split('/')
-    .filter((path) => path)
-    .slice(0, -1)
-    .join('/');
+  const module = pathname.split('/').filter(Boolean).slice(0, -1).join('/');
   let activeMenuItem = module || 'home';
   if (pathname.startsWith('/changelog')) {
     activeMenuItem = 'docs/react';
@@ -287,7 +278,8 @@ export default ({
       className={styles.nav}
       disabledOverflow
       items={items}
-      style={{ borderRight: 0 }}
     />
   );
 };
+
+export default HeaderNavigation;

.dumi/theme/slots/Header/SwitchBtn.tsx

@@ -1,7 +1,7 @@
-import { createStyles } from 'antd-style';
 import React from 'react';
-import classNames from 'classnames';
 import { Tooltip } from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
 
 export interface LangBtnProps {
   label1: React.ReactNode;

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

@@ -39,7 +39,6 @@ const locales = {
 
 const useStyle = createStyles(({ token, css }) => {
   const searchIconColor = '#ced4d9';
-
   return {
     header: css`
       position: sticky;
@@ -102,12 +101,10 @@ const useStyle = createStyles(({ token, css }) => {
       display: flex;
       align-items: center;
       margin: 0;
-
+      column-gap: 12px;
       > * {
         flex: none;
         margin: 0;
-        margin-inline-end: 12px;
-
         &:last-child {
           margin-inline-end: 40px;
         }
@@ -118,7 +115,6 @@ const useStyle = createStyles(({ token, css }) => {
     `,
     popoverMenu: {
       width: 300,
-
       [`${token.antCls}-popover-inner-content`]: {
         padding: 0,
       },
@@ -130,16 +126,19 @@ const useStyle = createStyles(({ token, css }) => {
       user-select: none;
     `,
     link: css`
-      margin-left: 10px;
-
+      margin-inline-start: 10px;
       @media only screen and (max-width: ${token.mobileMaxWidth}px) {
-        margin-left: 0;
+        margin-inline-start: 0;
       }
     `,
-    icon: css`
-      margin-right: 10px;
-      width: 22px;
-      height: 22px;
+    versionSelect: css`
+      min-width: 90px;
+      .rc-virtual-list {
+        .rc-virtual-list-holder {
+          scrollbar-width: thin;
+          scrollbar-color: unset;
+        }
+      }
     `,
   };
 });
@@ -299,8 +298,8 @@ const Header: React.FC = () => {
     navigationNode,
     <Select
       key="version"
-      className="version"
       size="small"
+      className={styles.versionSelect}
       defaultValue={pkg.version}
       onChange={handleVersionChange}
       dropdownStyle={getDropdownStyle}