Fix original article links

Author: zijian-z

src/App.jsx

@@ -953,6 +953,8 @@ function ArticleListPane({
 }
 
 function ReaderPane({ article, feed, mobilePane, onBack, onToggleStar }) {
+  const articleLink = normalizeArticleLink(article?.link);
+
   return (
     <main className={`pane reader-pane ${mobilePane === "reader" ? "mobile-active" : ""}`}>
       {article ? (
@@ -985,17 +987,17 @@ function ReaderPane({ article, feed, mobilePane, onBack, onToggleStar }) {
                   <Star size={18} fill={article.starred ? "currentColor" : "none"} />
                 </Button>
               </ActionTooltip>
-              {article.link ? (
-                <Button
-                  as="a"
-                  href={article.link}
+              {articleLink ? (
+                <a
+                  className="reader-link-button"
+                  href={articleLink}
                   target="_blank"
                   rel="noreferrer"
-                  variant="flat"
+                  aria-label="打开原文"
                   title="打开原文"
                 >
                   原文
-                </Button>
+                </a>
               ) : null}
             </div>
           </div>
@@ -1021,6 +1023,18 @@ function ReaderPane({ article, feed, mobilePane, onBack, onToggleStar }) {
   );
 }
 
+function normalizeArticleLink(value) {
+  if (!value) {
+    return "";
+  }
+
+  try {
+    return new URL(value, window.location.href).href;
+  } catch {
+    return "";
+  }
+}
+
 function AddFeedDialog({ folders, onClose, onSubmit }) {
   const [form, setForm] = useState({
     url: "",

src/styles.css

@@ -94,6 +94,33 @@ button {
   gap: 8px;
 }
 
+.reader-link-button {
+  min-width: 54px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 14px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--text) 8%, transparent);
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 720;
+  text-decoration: none;
+  line-height: 1;
+}
+
+.reader-link-button:hover {
+  border-color: var(--border);
+  background: color-mix(in srgb, var(--text) 12%, transparent);
+}
+
+.reader-link-button:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
+  outline-offset: 2px;
+}
+
 .app.accent-blue {
   --accent: #2563eb;
   --accent-soft: rgba(37, 99, 235, 0.12);