From e466ec19127f42290e9ac97e74b1c962519670b7 Mon Sep 17 00:00:00 2001
From: ChenlingasMx <42308734@qq.com>
Date: Tue, 22 Aug 2023 16:42:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=80=90website=E3=80=91=E9=94=9A?=
 =?UTF-8?q?=E7=82=B9=E9=9A=8F=E9=A1=B5=E9=9D=A2=E6=BB=9A=E5=8A=A8=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Preview/Anchor/index.jsx   | 22 ++++++++++++++++++-
 .../website/src/components/Preview/index.tsx  |  1 -
 .../website/src/pages/quick-start/README.md   | 12 +---------
 packages/antdp/README.md                      |  3 ---
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/examples/website/src/components/Preview/Anchor/index.jsx b/examples/website/src/components/Preview/Anchor/index.jsx
index 3ff1c2bed..d5a5a8dd9 100644
--- a/examples/website/src/components/Preview/Anchor/index.jsx
+++ b/examples/website/src/components/Preview/Anchor/index.jsx
@@ -42,16 +42,36 @@ const convertMarkdownToItems = (markdown) => {
 
 export default function Anchors({ markdownText }) {
   const [items, setItems] = useState([]);
+  const [activeAnchor, setActiveAnchor] = useState('');
+  useEffect(() => {
+    const handleScroll = () => {
+      const headings = document.querySelectorAll('h2');
+      let currentAnchor = '';
+      for (const heading of headings) {
+        const { top } = heading.getBoundingClientRect();
+        if (top <= 0) {
+          currentAnchor = heading.id;
+        }
+      }
+
+      setActiveAnchor(currentAnchor);
+    };
+    document.addEventListener('scroll', handleScroll, true);
+    return () => {
+      document.removeEventListener('scroll', handleScroll, true);
+    };
+  }, []);
+
   useEffect(() => {
     if (markdownText) {
       const items = convertMarkdownToItems(markdownText);
       setItems(items);
     }
   }, [markdownText]);
-
   return (
     <Anchor
       items={items}
+      getCurrentAnchor={() => activeAnchor}
       onClick={(e, link) => {
         e.preventDefault();
         const element = document.getElementById(link.href);
diff --git a/examples/website/src/components/Preview/index.tsx b/examples/website/src/components/Preview/index.tsx
index 931fb0b99..5cdade7c7 100644
--- a/examples/website/src/components/Preview/index.tsx
+++ b/examples/website/src/components/Preview/index.tsx
@@ -67,7 +67,6 @@ const PreviewDocument = ({
   const $dom = useRef<HTMLDivElement>(null);
   const { mdData, loading } = useMdData(path);
   useHyperlink($dom.current);
-
   return (
     <Wrapper ref={$dom}>
       <Loading loading={loading}>
diff --git a/examples/website/src/pages/quick-start/README.md b/examples/website/src/pages/quick-start/README.md
index cc4c322ad..909d7ff91 100644
--- a/examples/website/src/pages/quick-start/README.md
+++ b/examples/website/src/pages/quick-start/README.md
@@ -31,31 +31,21 @@ $ pnpm -v
 
 ## 创建ts项目
 ```shell 
-# npm 6.x
 $ npm init antdp my-app --example basic
-# npm 7+, extra double-dash is needed:
 $ npm init antdp my-app -- --example basic
-
 $ yarn create antdp [appName]
-# or npm
 $ npm create antdp my-app
-# or npx
 $ npx create-antdp my-app
 ```
 
 或者直接下载: [`basic.zip`](https://antdpro.github.io/antdp/zip/basic.zip)
 
-### 创建js项目
+## 创建js项目
 ```shell
-# npm 6.x
 $ npm init antdp my-app --example basicjs
-# npm 7+，extra double-dash is needed:
 $ npm init antdp my-app -- --example basicjs
-
 $ yarn create antdp [appName] -- --example basicjs
-# or npm
 $ npm create antdp my-app -- --example basicjs
-# or npx
 $ npx create-antdp my-app -- --example basicjs
 ```
 或者直接下载版本: [`basicjs.zip`](https://antdpro.github.io/antdp/zip/basicjs.zip)
diff --git a/packages/antdp/README.md b/packages/antdp/README.md
index c00665677..8228ca93f 100644
--- a/packages/antdp/README.md
+++ b/packages/antdp/README.md
@@ -8,9 +8,6 @@ Ant Design Project
 
 [![Ant Design Project](https://user-images.githubusercontent.com/59959718/262203847-d1612c3c-a37e-47fa-8282-dba85a8366be.png)](https://stackblitz.com/github/antdpro/antdp/tree/master/examples/antdp-base?embed=1&hideNavigation=0&hidedevtools=0)
 
-[![Ant Design Project](https://user-images.githubusercontent.com/59959718/262203891-ba31a1c0-84ad-42ae-8e0f-447b81ab9439.png)](https://stackblitz.com/github/antdpro/antdp/tree/master/examples/antdp-base?embed=1&hideNavigation=0&hidedevtools=0)
-
-[![Ant Design Project](https://user-images.githubusercontent.com/59959718/262203911-58268a5b-a948-4909-87cc-bd6b4a6b8d1f.png)](https://stackblitz.com/github/antdpro/antdp/tree/master/examples/antdp-base?embed=1&hideNavigation=0&hidedevtools=0)
 
 ### Features