(answer) branch main updated: fix: fix the number of lines displayed in the list information, and click on the list to jump to an exception; footnote link to jump to an exception

[shuai]

This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/answer.git


The following commit(s) were added to refs/heads/main by this push:
     new b3c36107 fix: fix the number of lines displayed in the list 
information, and click on the list to jump to an exception; footnote link to 
jump to an exception
b3c36107 is described below

commit b3c36107d782f0c02ffd9d48a9444068dc6647f5
Author: shuai <lishuail...@sifou.com>
AuthorDate: Tue Mar 18 14:34:50 2025 +0800

    fix: fix the number of lines displayed in the list information, and click 
on the list to jump to an exception; footnote link to jump to an exception
---
 ui/src/components/QuestionList/index.tsx | 14 ++++---
 ui/src/pages/Questions/Detail/index.tsx  | 71 ++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/QuestionList/index.tsx 
b/ui/src/components/QuestionList/index.tsx
index 3ab9f45d..fcb0994f 100644
--- a/ui/src/components/QuestionList/index.tsx
+++ b/ui/src/components/QuestionList/index.tsx
@@ -173,17 +173,21 @@ const QuestionList: FC<Props> = ({
                   <h5 className="text-wrap text-break">
                     <NavLink
                       className="link-dark d-block"
+                      onClick={(e) => e.stopPropagation()}
                       to={pathFactory.questionLanding(li.id, li.url_title)}>
                       {li.title}
                       {li.status === 2 ? ` [${t('closed')}]` : ''}
                     </NavLink>
                   </h5>
                   {viewType === 'card' && (
-                    <NavLink
-                      to={pathFactory.questionLanding(li.id, li.url_title)}
-                      className="d-block mb-2 small text-body text-truncate-2"
-                      dangerouslySetInnerHTML={{ __html: li.description }}
-                    />
+                    <div className="text-truncate-2 mb-2">
+                      <NavLink
+                        to={pathFactory.questionLanding(li.id, li.url_title)}
+                        className="d-block small text-body"
+                        dangerouslySetInnerHTML={{ __html: li.description }}
+                        onClick={(e) => e.stopPropagation()}
+                      />
+                    </div>
                   )}
 
                   <div className="question-tags mb-12">
diff --git a/ui/src/pages/Questions/Detail/index.tsx 
b/ui/src/pages/Questions/Detail/index.tsx
index 8c8921b8..95ae5234 100644
--- a/ui/src/pages/Questions/Detail/index.tsx
+++ b/ui/src/pages/Questions/Detail/index.tsx
@@ -242,6 +242,77 @@ const Index = () => {
     }
   }
 
+  useEffect(() => {
+    // handle footnote links
+    const fixFootnoteLinks = () => {
+      const footnoteLinks = document.querySelectorAll(
+        'a[href^="#"]:not([data-footnote-fixed])',
+      );
+
+      footnoteLinks.forEach((link) => {
+        link.setAttribute('data-footnote-fixed', 'true');
+        const href = link.getAttribute('href');
+        link.addEventListener('click', (e) => {
+          e.preventDefault();
+          const targetId = href?.substring(1) || '';
+          const targetElement = document.getElementById(targetId);
+
+          if (targetElement) {
+            window.history.pushState(null, '', `${location.pathname}${href}`);
+
+            scrollToElementTop(targetElement);
+          }
+        });
+      });
+
+      // 检查当前URL是否包含锚点，如果有，自动滚动到正确位置
+      if (window.location.hash) {
+        const { hash } = window.location;
+        const targetElement = document.getElementById(hash.substring(1));
+
+        if (targetElement) {
+          // 给浏览器一点时间来完成渲染
+          setTimeout(() => {
+            scrollToElementTop(targetElement);
+          }, 100);
+        }
+      }
+    };
+    fixFootnoteLinks();
+
+    const observer = new MutationObserver(() => {
+      fixFootnoteLinks();
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['id', 'href'],
+    });
+
+    // 监听 URL hash 变化
+    const handleHashChange = () => {
+      if (window.location.hash) {
+        const { hash } = window.location;
+        const targetElement = document.getElementById(hash.substring(1));
+
+        if (targetElement) {
+          setTimeout(() => {
+            scrollToElementTop(targetElement);
+          }, 100);
+        }
+      }
+    };
+
+    window.addEventListener('hashchange', handleHashChange);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('hashchange', handleHashChange);
+    };
+  }, [location.pathname]);
+
   return (
     <Row className="questionDetailPage pt-4 mb-5">
       <Col className="page-main flex-auto">