fix(ui:anchor): use getElementById

Author: xiejay97

.stylelintignore

@@ -3,4 +3,4 @@
 /coverage
 /.yarn
 /packages/site/dist
-/packages/site/src/app/routes
+/packages/site/src/app/routes

packages/site/src/app/components/route/RouteArticle.tsx

@@ -25,8 +25,8 @@ export function AppRouteArticle(props: AppRouteArticleProps) {
   const { i18n } = useTranslation();
   const mediaMatch = useMediaMatch();
 
-  const [_links, setLinks] = useImmer<{ title: string; href: string }[]>([]);
-  const links = isUndefined(props.links) ? _links : [...props.links, { title: 'API', href: '#API' }];
+  const [_links, setLinks] = useImmer<{ title?: string; href: string }[]>([]);
+  const links = isUndefined(props.links) ? _links : [...props.links, { href: 'API' }];
 
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -58,9 +58,9 @@ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
 
   useLayoutEffect(() => {
     if (isUndefined(props.links)) {
-      const arr: { title: string; href: string }[] = [];
+      const arr: { href: string }[] = [];
       document.querySelectorAll('.app-route-article h2').forEach((el) => {
-        arr.push({ title: el.id, href: `#${el.id}` });
+        arr.push({ href: el.id });
       });
       setLinks(arr);
     }

packages/site/src/app/routes/docs/Internationalization/Internationalization.md

@@ -57,7 +57,7 @@ export default function App() {
 }
 ```
 
-## add language
+## Add language
 
 Support for adding languages:
 

packages/ui/components/anchor/Anchor.tsx

@@ -11,8 +11,8 @@ import { usePrefixConfig, useComponentConfig, useLayout } from '../../hooks';
 import { registerComponentMate } from '../../utils';
 
 export interface DAnchorItem {
-  title: React.ReactNode;
   href: string;
+  title?: React.ReactNode;
   target?: string;
 }
 
@@ -76,7 +76,7 @@ function Anchor<T extends DAnchorItem>(props: DAnchorProps<T>, ref: React.Forwar
     let nearestEl: [string, number] | undefined;
     const reduceLinks = (arr: DNestedChildren<T>[]) => {
       arr.forEach(({ href, children }) => {
-        const el = document.querySelector(href);
+        const el = document.getElementById(href);
         if (el) {
           const top = el.getBoundingClientRect().top;
           // Add 1 because `getBoundingClientRect` return decimal
@@ -165,10 +165,10 @@ function Anchor<T extends DAnchorItem>(props: DAnchorProps<T>, ref: React.Forwar
     const pageTop = pageEl.getBoundingClientRect().top;
 
     const scrollTop = pageEl.scrollTop;
-    window.location.hash = href;
+    window.location.hash = `#${href}`;
     pageEl.scrollTop = scrollTop;
 
-    const el = document.querySelector(href);
+    const el = document.getElementById(href);
     if (el) {
       const top = el.getBoundingClientRect().top;
       const scrollTop = top - pageTop + pageEl.scrollTop - dDistance;
@@ -192,7 +192,7 @@ function Anchor<T extends DAnchorItem>(props: DAnchorProps<T>, ref: React.Forwar
                   'is-active': linkHref === activeHref,
                 })}
                 style={{ paddingLeft: 16 + level * 16 }}
-                href={linkHref}
+                href={`#${linkHref}`}
                 target={linkTarget}
                 onClick={(e) => {
                   e.preventDefault();
@@ -201,7 +201,7 @@ function Anchor<T extends DAnchorItem>(props: DAnchorProps<T>, ref: React.Forwar
                   handleLinkClick(linkHref);
                 }}
               >
-                {linkTitle}
+                {linkTitle ?? linkHref}
               </a>
             </li>
             {children && getNodes(children, level + 1)}

packages/ui/components/anchor/demos/1.Basic.md

@@ -21,15 +21,10 @@ export default function Demo() {
       <DAnchor
         dList={[
           {
-            title: 'Examples',
-            href: '#Examples',
-            children: [
-              { title: 'AnchorBasicDemo', href: '#AnchorBasicDemo' },
-              { title: 'AnchorIndicatorDemo', href: '#AnchorIndicatorDemo' },
-              { title: 'AnchorScrollDemo', href: '#AnchorScrollDemo' },
-            ],
+            href: 'Examples',
+            children: [{ href: 'AnchorBasicDemo' }, { href: 'AnchorIndicatorDemo' }, { href: 'AnchorScrollDemo' }],
           },
-          { title: 'API', href: '#API' },
+          { href: 'API' },
         ]}
       />
     </DAffix>

packages/ui/components/anchor/demos/2.Indicator.md

@@ -24,15 +24,10 @@ export default function Demo() {
     <DAnchor
       dList={[
         {
-          title: 'Examples',
-          href: '#Examples',
-          children: [
-            { title: 'AnchorBasicDemo', href: '#AnchorBasicDemo' },
-            { title: 'AnchorIndicatorDemo', href: '#AnchorIndicatorDemo' },
-            { title: 'AnchorScrollDemo', href: '#AnchorScrollDemo' },
-          ],
+          href: 'Examples',
+          children: [{ href: 'AnchorBasicDemo' }, { href: 'AnchorIndicatorDemo' }, { href: 'AnchorScrollDemo' }],
         },
-        { title: 'API', href: '#API' },
+        { href: 'API' },
       ]}
       dIndicator={DAnchor.LINE_INDICATOR}
     />

packages/ui/components/anchor/demos/3.Scroll.md

@@ -20,15 +20,10 @@ export default function Demo() {
     <DAnchor
       dList={[
         {
-          title: 'Examples',
-          href: '#Examples',
-          children: [
-            { title: 'AnchorBasicDemo', href: '#AnchorBasicDemo' },
-            { title: 'AnchorIndicatorDemo', href: '#AnchorIndicatorDemo' },
-            { title: 'AnchorScrollDemo', href: '#AnchorScrollDemo' },
-          ],
+          href: 'Examples',
+          children: [{ href: 'AnchorBasicDemo' }, { href: 'AnchorIndicatorDemo' }, { href: 'AnchorScrollDemo' }],
         },
-        { title: 'API', href: '#API' },
+        { href: 'API' },
       ]}
       dDistance={window.innerHeight / 2}
       dScrollBehavior="smooth"

tools/executors/site/build-base/impl.js

@@ -246,7 +246,7 @@ class GenerateSite {
                         demoStr = demoStr.replace(/__tsxSource__/g, new TextEncoder().encode(demo.get(lang).tsx.match(/(?<=```tsx\n)[\s\S]*?(?=```)/g)[0]).join());
                         demoStr = demoStr.replace(/__scssSource__/g, demo.get(lang).scss ? new TextEncoder().encode(demo.get(lang).scss.match(/(?<=```scss\n)[\s\S]*?(?=```)/g)[0]).join() : '');
                         demosStr += demoStr;
-                        linksStr += String.raw `{ title: '${demo.get(lang).title}', href: '#${demo.get(lang).id}' }, `;
+                        linksStr += String.raw `{ title: '${demo.get(lang).title}', href: '${demo.get(lang).id}' }, `;
                     }
                 });
                 let routeArticleProps = String.raw `

tools/executors/site/build-base/impl.ts

@@ -261,7 +261,7 @@ class GenerateSite {
 
             demosStr += demoStr;
 
-            linksStr += String.raw`{ title: '${demo.get(lang)!.title!}', href: '#${demo.get(lang)!.id!}' }, `;
+            linksStr += String.raw`{ title: '${demo.get(lang)!.title!}', href: '${demo.get(lang)!.id!}' }, `;
           }
         });