From 069b84daf9b99b095b8ebf8d9dddbe07d5de26b0 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Wed, 2 Sep 2026 13:17:04 +0800
Subject: [PATCH] fix(settings): render changelog entries as markdown

---
 .../components/settings/ChangelogPanel.vue    | 13 +++++++-----
 .../src/lib/__tests__/ai/aiMarkdown.spec.ts   | 20 ++++++++++++++++++-
 apps/desktop/src/lib/ai/aiMarkdown.ts         |  8 ++++++++
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/components/settings/ChangelogPanel.vue b/apps/desktop/src/components/settings/ChangelogPanel.vue
index d52358eb9f..aba18982cf 100644
--- a/apps/desktop/src/components/settings/ChangelogPanel.vue
+++ b/apps/desktop/src/components/settings/ChangelogPanel.vue
@@ -7,7 +7,8 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { currentLocale } from "@/i18n";
 import { isTauriRuntime } from "@/lib/backend/tauriRuntime";
-import { changelogLangFromLocale, changelogReleaseUrl, changelogWebsiteUrl, createLatestRequestGuard, fetchChangelog, type ChangelogLang, type ChangelogRelease } from "@/lib/app/changelog";
+import { formatAiInlineMarkdownFragment, handleAiMarkdownLinkClick } from "@/lib/ai/aiMarkdown";
+import { changelogLangFromLocale, changelogReleaseUrl, changelogWebsiteUrl, createLatestRequestGuard, fetchChangelog, type ChangelogItem, type ChangelogLang, type ChangelogRelease } from "@/lib/app/changelog";
 
 const PAGE_SIZE = 5;
 
@@ -80,6 +81,11 @@ function openExternalUrl(url: string) {
   }
 }
 
+function formatChangelogItemHtml(item: ChangelogItem): string {
+  const title = formatAiInlineMarkdownFragment(item.title);
+  return item.desc ? `${title} — ${formatAiInlineMarkdownFragment(item.desc)}` : title;
+}
+
 function isExpanded(tag: string) {
   return expandedTags.value.has(tag);
 }
@@ -193,10 +199,7 @@ watch(changelogLang, (lang) => {
               <ul class="space-y-1.5">
                 <li v-for="(item, itemIndex) in section.items" :key="itemIndex" class="flex gap-2 text-xs leading-relaxed text-muted-foreground">
                   <span class="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-muted-foreground/60" />
-                  <span>
-                    <template v-if="item.desc">{{ item.title }} — {{ item.desc }}</template>
-                    <template v-else>{{ item.title }}</template>
-                  </span>
+                  <span class="min-w-0 [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2" v-html="formatChangelogItemHtml(item)" @click="handleAiMarkdownLinkClick($event, openExternalUrl)" />
                 </li>
               </ul>
             </div>
diff --git a/apps/desktop/src/lib/__tests__/ai/aiMarkdown.spec.ts b/apps/desktop/src/lib/__tests__/ai/aiMarkdown.spec.ts
index 212cf10fee..b03a3f7575 100644
--- a/apps/desktop/src/lib/__tests__/ai/aiMarkdown.spec.ts
+++ b/apps/desktop/src/lib/__tests__/ai/aiMarkdown.spec.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { aiMarkdownLinkUrlFromClick, formatAiInlineMarkdown, handleAiMarkdownLinkClick, normalizeAiMarkdownLink } from "@/lib/ai/aiMarkdown";
+import { aiMarkdownLinkUrlFromClick, formatAiInlineMarkdown, formatAiInlineMarkdownFragment, handleAiMarkdownLinkClick, normalizeAiMarkdownLink } from "@/lib/ai/aiMarkdown";
 
 describe("formatAiInlineMarkdown", () => {
   it("renders http links for external browser handling", () => {
@@ -26,6 +26,24 @@ describe("formatAiInlineMarkdown", () => {
   });
 });
 
+describe("formatAiInlineMarkdownFragment", () => {
+  it("renders single-line content without a block paragraph wrapper", () => {
+    const html = formatAiInlineMarkdownFragment("Title — see [PR #1](https://example.com/pull/1) and `code`.");
+
+    expect(html).not.toContain("<p>");
+    expect(html).toContain('href="https://example.com/pull/1"');
+    expect(html).toContain("<code");
+    expect(html).toContain("Title — see");
+  });
+
+  it("escapes raw html like the block renderer", () => {
+    const html = formatAiInlineMarkdownFragment("<script>alert(1)</script>");
+
+    expect(html).toContain("&lt;script&gt;alert(1)&lt;/script&gt;");
+    expect(html).not.toContain("<script>");
+  });
+});
+
 describe("markdown table overflow wrapping", () => {
   it("wraps tables in scroll container", () => {
     const html = formatAiInlineMarkdown("| a | b |\n| --- | --- |\n| 1 | 2 |\n| 3 | 4 |");
diff --git a/apps/desktop/src/lib/ai/aiMarkdown.ts b/apps/desktop/src/lib/ai/aiMarkdown.ts
index aa5507a26d..689a01852b 100644
--- a/apps/desktop/src/lib/ai/aiMarkdown.ts
+++ b/apps/desktop/src/lib/ai/aiMarkdown.ts
@@ -56,6 +56,14 @@ export function formatAiInlineMarkdown(text: string): string {
   }
 }
 
+export function formatAiInlineMarkdownFragment(text: string): string {
+  try {
+    return markedInstance.parseInline(text) as string;
+  } catch {
+    return escapeHtml(text);
+  }
+}
+
 export function normalizeAiMarkdownLink(href: string): string | null {
   try {
     const url = new URL(href);