From 073d5e574591a5ec6b5382907f8da32c8388d179 Mon Sep 17 00:00:00 2001
From: Carrotzpc <zhang.pc3@gmail.com>
Date: Mon, 29 Jul 2024 11:53:38 +0800
Subject: [PATCH] perf: improve header nav switch

---
 README.md                  | 10 +++++---
 example/.dumirc.ts         |  1 +
 src/slots/Navbar/index.tsx | 52 ++++++++++++++++++++++++++++++--------
 3 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index f94ff8e..e57f298 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 <h1>Dumi Theme YuntiJS</h1>
 
-dumi-theme-yunti is a documentation site theme package designed for `Dumi 2`. <br/>It provides a more beautiful and user-friendly development and reading experience based on `@lobehub/ui`
+dumi-theme-yunti is a documentation site theme package designed for `Dumi 2`. <br/>It provides a more beautiful and user-friendly development and reading experience based on [dumi-theme-lobehub](https://github.com/lobehub/dumi-theme-lobehub) and [dumi-theme-antd](https://github.com/KuangPF/dumi-theme-antd).
 
 [![][npm-release-shield]][npm-release-link]
 [![][github-releasedate-shield]][github-releasedate-link]
@@ -47,6 +47,7 @@ dumi-theme-yunti is a documentation site theme package designed for `Dumi 2`. <b
 - [x] 🪄 **Exquisite Syntax Highlighting:** This theme package provides accurate and beautiful syntax highlighting. It utilizes modern syntax highlighting libraries like Shiki and Prism, and offers a rich set of code highlighting schemes to enhance code readability.
 - [x] 🧩 **Flexible Component Reusability:** This theme package provides high flexibility for customizing local themes. It exports premium components from the theme package, which can be reused as independent modules. Developers can freely combine and use these components in the dumi local theme package.
 - [x] 📱 **Well-Adapted for Mobile Devices:** This theme package is well-adapted for mobile devices. With the flexible style solution based on CSSinJS, multiple layout options are easily implemented. Users can enjoy a consistent and smooth experience across different devices.
+- [ ] 🧭 **SSR Enhancement and Menu Nesting:** Refer to antd source code to optimize SSR and menu nesting.
 
 <div align="right">
 
@@ -119,8 +120,11 @@ Or clone it for local development:
 ```bash
 $ git clone https://github.com/yuntijs/dumi-theme-yunti.git
 $ cd dumi-theme-yunti
-$ bun install
-$ bun dev
+$ pnpm install
+# run theme dev
+$ pnpm dev
+# run example dev
+$ pnpm docs:dev
 ```
 
 <div align="right">
diff --git a/example/.dumirc.ts b/example/.dumirc.ts
index e6b9d6f..357130d 100644
--- a/example/.dumirc.ts
+++ b/example/.dumirc.ts
@@ -49,6 +49,7 @@ const themeConfig = defineThemeConfig({
       { title: '分组示例', link: '/config/base' },
       { title: '折叠示例', link: '/demo/secondary-sidebar-colors' },
       { title: 'Changelog', link: '/changelog' },
+      { title: 'Yunti UI', link: 'https://yuntijs.github.io/yunti-ui/' },
     ],
     'en-US': [
       { title: 'Group Demo', link: '/config/base-en' },
diff --git a/src/slots/Navbar/index.tsx b/src/slots/Navbar/index.tsx
index 6214b14..22878fc 100644
--- a/src/slots/Navbar/index.tsx
+++ b/src/slots/Navbar/index.tsx
@@ -1,7 +1,8 @@
-import { TabsNav } from '@lobehub/ui';
+import { Icon, TabsNav } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { Link, history, useLocation } from 'dumi';
 import NavbarExtra from 'dumi/theme-default/slots/NavbarExtra';
+import { ExternalLink } from 'lucide-react';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
@@ -12,7 +13,18 @@ const useStyles = createStyles(({ css, stylish, token, responsive, prefixCls })
   return {
     link: css`
       ${stylish.resetLinkColor}
-      padding: 6px 0;
+      display: inline-flex;
+      align-items: center;
+
+      & > .lint-text {
+        ${stylish.resetLinkColor}
+      }
+
+      & > .anticon {
+        margin-left: ${token.marginXS}px;
+        font-size: ${token.fontSizeSM}px;
+        color: ${token.colorTextTertiary};
+      }
     `,
     tabs: css`
       .${prefixCls}-tabs-tab-active a {
@@ -24,6 +36,9 @@ const useStyles = createStyles(({ css, stylish, token, responsive, prefixCls })
     `,
   };
 });
+
+const linkToKey = (path?: string) => (path ?? '').split('/').slice(0, 2).join('/');
+
 const Navbar = memo(() => {
   const { styles } = useStyles();
   const { pathname } = useLocation();
@@ -34,30 +49,47 @@ const Navbar = memo(() => {
   return (
     <>
       <TabsNav
-        // activeKey={activePath}
         activeKey={activeMenuItem}
         className={styles.tabs}
         items={nav.map(item => {
-          const linkKeyValue =
-            item.activePath || (item.link ?? '').split('/').slice(0, 2).join('/');
+          const linkKeyValue = item.activePath || linkToKey(item.link);
           return {
             key: isExternalLinks(item.link) ? item.link! : linkKeyValue,
             label: isExternalLinks(item.link) ? (
-              <a className={styles.link} href={String(item.link)} rel="noreferrer" target="_blank">
-                {item.title}
+              <a
+                className={styles.link}
+                href={String(item.link)}
+                onClick={e => e.preventDefault()}
+                rel="noreferrer"
+                target="_blank"
+              >
+                <span className="lint-text">{item.title}</span> <Icon icon={ExternalLink} />
               </a>
             ) : (
-              <Link className={styles.link} to={String(item.link)}>
+              <Link
+                className={styles.link}
+                onClick={e => e.preventDefault()}
+                to={String(item.link)}
+              >
                 {item.title}
               </Link>
             ),
           };
         })}
-        onChange={path => {
-          const url = nav.find(index => index.activePath === path || index.link === path)?.link;
+        onTabClick={activeKey => {
+          const url = nav.find(
+            index =>
+              index.activePath === activeKey ||
+              index.link === activeKey ||
+              linkToKey(index.link) === activeKey
+          )?.link;
 
           if (!url) return;
 
+          if (isExternalLinks(url)) {
+            return window.open(url);
+          }
+
           history.push(url);
         }}
       />