From c9f9df029b50357dd8f8c001f136201285f900fe Mon Sep 17 00:00:00 2001
From: duenyang <377153400@qq.com>
Date: Tue, 21 May 2024 17:20:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/components/navbar.tsx       |  2 +-
 src/pages/layout/component-layout.tsx | 20 ++++++++++++++++----
 src/routes.tsx                        | 15 ++++++++++++++-
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/pages/components/navbar.tsx b/src/pages/components/navbar.tsx
index a9fb26b0..2d9a7832 100644
--- a/src/pages/components/navbar.tsx
+++ b/src/pages/components/navbar.tsx
@@ -75,7 +75,7 @@ export class Navbar extends Component<Props> {
     if (navbarItem.href) {
       return navbarItem.href;
     }
-    return `#${navbarItem.path}`;
+    return `${navbarItem.path}`;
   }
 
   renderNavbarItemChild(navbarItemChild: NavbarItem) {
diff --git a/src/pages/layout/component-layout.tsx b/src/pages/layout/component-layout.tsx
index 9b8f11ec..8ac8e503 100644
--- a/src/pages/layout/component-layout.tsx
+++ b/src/pages/layout/component-layout.tsx
@@ -20,6 +20,8 @@ function throttle(func: Function, delay: number) {
 const routerList = JSON.parse(JSON.stringify(sidebarConfig).replace(/component:.+/g, ''));
 @tag('component-layout')
 export class ComponentLayout extends Component<{ children?: VNode | VNode[] }> {
+  asideRef: any = null;
+
   scroll = throttle(() => {
     const { scrollTop } = document.documentElement;
     const t = document
@@ -37,16 +39,26 @@ export class ComponentLayout extends Component<{ children?: VNode | VNode[] }> {
     }
   }, 100);
 
+  componentLoaded = () => {
+    document.addEventListener('scroll', this.scroll);
+  };
+
+  asideChange = ({ detail }: { detail: string }) => {
+    if (window.location.pathname === detail) return;
+    window.location.pathname = detail;
+  };
+
   static css = styles;
 
   ready(): void {
-    window.addEventListener('component-loaded', () => {
-      document.addEventListener('scroll', this.scroll);
-    });
+    window.addEventListener('component-loaded', this.componentLoaded);
+    this.asideRef?.addEventListener?.('change', this.asideChange);
   }
 
   uninstall(): void {
+    window.removeEventListener('component-loaded', this.componentLoaded);
     document.removeEventListener('scroll', this.scroll);
+    this.asideRef?.removeEventListener?.('change', this.asideChange);
   }
 
   render() {
@@ -56,7 +68,7 @@ export class ComponentLayout extends Component<{ children?: VNode | VNode[] }> {
           <td-header framework="web-components" slot="header">
             <td-doc-search slot="search" docsearchInfo="搜索" />
           </td-header>
-          <td-doc-aside title="Web Components" routerList={routerList}>
+          <td-doc-aside ref={(e: any) => (this.asideRef = e)} title="Web Components" routerList={routerList}>
             <td-select value="0.0.1" options={[{ label: '0.0.1', value: '0.0.1' }]} slot="extra"></td-select>
           </td-doc-aside>
           <td-doc-content pageStatus="show">
diff --git a/src/routes.tsx b/src/routes.tsx
index 85533da0..da35bfe1 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -9,6 +9,19 @@ import { pending } from './pages/components/pending';
 import { fallback } from './pages/components/fallback';
 import './pages/layout/component-layout';
 import './pages/components/appear';
+import sidebar from './sidebar.config';
+
+function createComponentRoutes(config: any[] = []) {
+  const routes: any[] = [];
+  config.forEach((item) => {
+    if (item.children) {
+      item.children.forEach((c: any) => {
+        routes.push(createComponentRoute(c.path, c.component));
+      });
+    }
+  });
+  return routes;
+}
 
 @tag('td-suspense')
 export class tdSuspense extends Component<{ componentImport: () => Promise<any> }> {
@@ -41,7 +54,7 @@ export const routes = [
   createRoute('/results/server-error', () => import('./pages/results/server-error')),
   createRoute('/results/system-maintenance', () => import('./pages/results/system-maintenance')),
   createRoute('/results/not-found', () => import('./pages/results/not-found')),
-  createComponentRoute('/components/button', () => import('./components/button/README.md')),
+  ...createComponentRoutes(sidebar),
   createRoute('/icons', () => import('./pages/icons')),
   createRoute('*', () => import('./pages/results/not-found')),
   {