perf: improve header nav switch

yuntijs · Jul 29, 2024 · 073d5e5 · 073d5e5
1 parent 4a4483f
commit 073d5e5
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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);
         }}
       />