docs: fix nprogress (#43955)

.dumi/theme/common/Link.tsx

@@ -1,31 +1,49 @@
 import type { MouseEvent } from 'react';
-import React, { forwardRef, startTransition } from 'react';
-import { useNavigate } from 'dumi';
+import React, { forwardRef, useLayoutEffect, useMemo, useTransition } from 'react';
+import { useLocation, useNavigate } from 'dumi';
+import nprogress from 'nprogress';
 
 export type LinkProps = {
-  to?: string;
+  to?: string | { pathname?: string; search?: string; hash?: string };
   children?: React.ReactNode;
   className?: string;
 };
 
 const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
   const { to, children, ...rest } = props;
+  const [isPending, startTransition] = useTransition();
   const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  const href = useMemo(() => {
+    if (typeof to === 'object') {
+      return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`;
+    }
+    return to;
+  }, [to]);
 
   const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
-    if (!to.startsWith('http')) {
+    if (!href.startsWith('http')) {
       // Should support open in new tab
       if (!e.metaKey && !e.ctrlKey && !e.shiftKey) {
         e.preventDefault();
         startTransition(() => {
-          navigate(to);
+          navigate(href);
         });
       }
     }
   };
 
+  useLayoutEffect(() => {
+    if (isPending) {
+      nprogress.start();
+    } else {
+      nprogress.done();
+    }
+  }, [isPending]);
+
   return (
-    <a ref={ref} href={to} onClick={handleClick} {...rest}>
+    <a ref={ref} href={href} onClick={handleClick} {...rest}>
       {children}
     </a>
   );

.dumi/theme/slots/Header/More.tsx

@@ -2,16 +2,20 @@ import { DownOutlined } from '@ant-design/icons';
 import { createStyles } from 'antd-style';
 import { FormattedMessage } from 'dumi';
 import React from 'react';
+import classnames from 'classnames';
 import type { MenuProps } from 'antd';
 import { Button, Dropdown } from 'antd';
 import type { SharedProps } from './interface';
 
-const useStyle = createStyles(({ css }) => ({
+const useStyle = createStyles(({ css, token }) => ({
   smallStyle: css`
     font-size: 12px;
     color: #777;
     margin-left: 0.3em;
   `,
+  down: css`
+    color: ${token.colorTextQuaternary};
+  `,
   downOutlined: css`
     font-size: 9px;
     margin: -1px 0 0 2px;
@@ -84,7 +88,9 @@ const More: React.FC<SharedProps> = ({ isRTL }) => {
     <Dropdown menu={{ items: getEcosystemGroup() }} placement="bottomRight">
       <Button size="small">
         <FormattedMessage id="app.header.menu.more" />
-        <DownOutlined className={isRTL ? styles.downOutlinedRTL : styles.downOutlined} />
+        <DownOutlined
+          className={classnames(isRTL ? styles.downOutlinedRTL : styles.downOutlined, styles.down)}
+        />
       </Button>
     </Dropdown>
   );

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormattedMessage, Link, useFullSidebarData, useLocation } from 'dumi';
+import { FormattedMessage, useFullSidebarData, useLocation } from 'dumi';
 import { MenuOutlined } from '@ant-design/icons';
 import { createStyles, css } from 'antd-style';
 import type { MenuProps } from 'antd';
@@ -8,6 +8,7 @@ import { getEcosystemGroup } from './More';
 import * as utils from '../../utils';
 import type { SharedProps } from './interface';
 import useLocale from '../../../hooks/useLocale';
+import Link from '../../common/Link';
 
 // ============================= Theme =============================
 const locales = {

package.json

@@ -258,6 +258,7 @@
     "lz-string": "^1.4.4",
     "mockdate": "^3.0.0",
     "node-notifier": "^10.0.1",
+    "nprogress": "^0.2.0",
     "open": "^9.0.0",
     "prettier": "^3.0.0",
     "prettier-plugin-jsdoc": "^1.0.1",