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

Author: shuashuai

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">

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">