From 2dbe9c1e0e6a81eaf567151a7127a623b1fbc013 Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Thu, 28 Aug 2025 11:54:50 +0800
Subject: [PATCH] feat(Link): add hyperlink tooltips (#9620)

---
 .../src/pages/home/Markdown/Hyperlink.tsx     | 65 +++++++++++++++++++
 src/renderer/src/pages/home/Markdown/Link.tsx | 15 +++--
 2 files changed, 74 insertions(+), 6 deletions(-)
 create mode 100644 src/renderer/src/pages/home/Markdown/Hyperlink.tsx

diff --git a/src/renderer/src/pages/home/Markdown/Hyperlink.tsx b/src/renderer/src/pages/home/Markdown/Hyperlink.tsx
new file mode 100644
index 0000000000..6e461ea1a6
--- /dev/null
+++ b/src/renderer/src/pages/home/Markdown/Hyperlink.tsx
@@ -0,0 +1,65 @@
+import Favicon from '@renderer/components/Icons/FallbackFavicon'
+import { Popover } from 'antd'
+import React, { memo, useMemo } from 'react'
+import styled from 'styled-components'
+
+interface HyperLinkProps {
+  children: React.ReactNode
+  href: string
+}
+const Hyperlink: React.FC<HyperLinkProps> = ({ children, href }) => {
+  const link = useMemo(() => {
+    try {
+      return decodeURIComponent(href)
+    } catch {
+      return href
+    }
+  }, [href])
+
+  const hostname = useMemo(() => {
+    try {
+      return new URL(link).hostname
+    } catch {
+      return null
+    }
+  }, [link])
+
+  if (!href) return children
+
+  return (
+    <Popover
+      arrow={false}
+      content={
+        <StyledHyperLink>
+          {hostname && <Favicon hostname={hostname} alt={link} />}
+          <span>{link}</span>
+        </StyledHyperLink>
+      }
+      placement="top"
+      color="var(--color-background)"
+      styles={{
+        body: {
+          border: '1px solid var(--color-border)',
+          padding: '12px',
+          borderRadius: '8px'
+        }
+      }}>
+      {children}
+    </Popover>
+  )
+}
+
+const StyledHyperLink = styled.div`
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  span {
+    max-width: min(400px, 70vw);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+
+export default memo(Hyperlink)
diff --git a/src/renderer/src/pages/home/Markdown/Link.tsx b/src/renderer/src/pages/home/Markdown/Link.tsx
index 5a008a40f3..5dbac883f3 100644
--- a/src/renderer/src/pages/home/Markdown/Link.tsx
+++ b/src/renderer/src/pages/home/Markdown/Link.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import type { Node } from 'unist'
 
 import CitationTooltip from './CitationTooltip'
+import Hyperlink from './Hyperlink'
 
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   node?: Omit<Node, 'type'>
@@ -44,12 +45,14 @@ const Link: React.FC<LinkProps> = (props) => {
 
   // 普通链接
   return (
-    <a
-      {...omit(props, ['node', 'citationData'])}
-      target="_blank"
-      rel="noreferrer"
-      onClick={(e) => e.stopPropagation()}
-    />
+    <Hyperlink href={props.href || ''}>
+      <a
+        {...omit(props, ['node', 'citationData'])}
+        target="_blank"
+        rel="noreferrer"
+        onClick={(e) => e.stopPropagation()}
+      />
+    </Hyperlink>
   )
 }