From 58a2fda9ac7b7e7b3fbd2497b3cc347d91f2137a Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Tue, 4 Aug 2026 20:55:22 +0800
Subject: [PATCH 1/2] feat: add deprecated marking to package timeline page

---
 .../[[org]]/[packageName].vue                 | 72 ++++++++++++++-----
 i18n/locales/en.json                          |  1 +
 i18n/locales/zh-CN.json                       |  3 +-
 i18n/locales/zh-TW.json                       |  3 +-
 i18n/schema.json                              |  3 +
 server/api/registry/timeline/[...pkg].get.ts  |  2 +
 6 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index a86c3f2af3..284deb23cb 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -332,6 +332,13 @@ const versionSubEvents = computed(() => {
   return result
 })
 
+// The latest deprecated version — the first deprecated entry by publish time.
+// npm registry doesn't record a separate deprecation timestamp, so the badge
+// is shown once on the newest deprecated release only.
+const latestDeprecatedVersion = computed(
+  () => timelineEntries.value.find(e => e.deprecated) ?? null,
+)
+
 const selectedVersion = shallowRef<string | null>(null)
 
 useSeoMeta({
@@ -375,7 +382,7 @@ useSeoMeta({
             :class="entry.version === version ? 'bg-accent border-accent' : 'bg-bg-subtle'"
           />
           <!-- Content -->
-          <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+          <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
             <LinkBase
               :to="packageRoute(entry.version)"
               class="text-sm font-medium"
@@ -396,6 +403,13 @@ useSeoMeta({
             >
               {{ tag }}
             </span>
+            <span
+              v-if="latestDeprecatedVersion?.version === entry.version"
+              class="inline-flex items-center gap-1 text-3xs font-semibold uppercase tracking-wide text-red-600 dark:text-red-400"
+            >
+              <span class="i-lucide:octagon-alert w-3 h-3 shrink-0" aria-hidden="true" />
+              {{ $t('package.timeline.deprecated') }}
+            </span>
             <DateTime
               :datetime="entry.time"
               class="text-xs text-fg-subtle"
@@ -406,31 +420,51 @@ useSeoMeta({
           </div>
           <!-- Sub-events -->
           <ol
-            v-if="versionSubEvents.has(entry.version)"
+            v-if="
+              versionSubEvents.has(entry.version) ||
+              latestDeprecatedVersion?.version === entry.version
+            "
             class="relative border-s border-border/50 ms-3 mt-2"
           >
+            <template v-if="versionSubEvents.has(entry.version)">
+              <li
+                v-for="ev in versionSubEvents.get(entry.version)"
+                :key="ev.key"
+                class="mb-2 ms-4 relative last:mb-0"
+              >
+                <span
+                  class="absolute -start-[1.375rem] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
+                  :class="
+                    ev.positive ? 'bg-green-500 border-green-600' : 'bg-amber-500 border-amber-600'
+                  "
+                >
+                  <span class="w-2 h-2 text-white" :class="ev.icon" aria-hidden="true" />
+                </span>
+                <p
+                  class="text-xs"
+                  :class="
+                    ev.positive
+                      ? 'text-green-700 dark:text-green-400'
+                      : 'text-amber-700 dark:text-amber-400'
+                  "
+                >
+                  {{ ev.text }}
+                </p>
+              </li>
+            </template>
+            <!-- Deprecated message (only on the latest deprecated version) -->
             <li
-              v-for="ev in versionSubEvents.get(entry.version)"
-              :key="ev.key"
-              class="mb-2 ms-4 relative last:mb-0"
+              v-if="latestDeprecatedVersion?.version === entry.version"
+              class="ms-4 relative"
+              :class="versionSubEvents.has(entry.version) ? 'mt-2' : ''"
             >
               <span
-                class="absolute -start-[1.375rem] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
-                :class="
-                  ev.positive ? 'bg-green-500 border-green-600' : 'bg-amber-500 border-amber-600'
-                "
+                class="absolute -start-[1.375rem] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border bg-red-500 border-red-600"
               >
-                <span class="w-2 h-2 text-white" :class="ev.icon" aria-hidden="true" />
+                <span class="w-2 h-2 text-white i-lucide:octagon-alert" aria-hidden="true" />
               </span>
-              <p
-                class="text-xs"
-                :class="
-                  ev.positive
-                    ? 'text-green-700 dark:text-green-400'
-                    : 'text-amber-700 dark:text-amber-400'
-                "
-              >
-                {{ ev.text }}
+              <p class="text-xs text-red-700 dark:text-red-400">
+                {{ entry.deprecated }}
               </p>
             </li>
           </ol>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index a09e22b59f..1a40d75f8a 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -646,6 +646,7 @@
       "trusted_publisher_removed": "Trusted publishing removed",
       "provenance_added": "Provenance enabled",
       "provenance_removed": "Provenance removed",
+      "deprecated": "Deprecated",
       "chart": {
         "tab_aria_label": "Metric selection",
         "dependency_size": "Dependency Size",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 99d9019d6a..e779211a4a 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -601,7 +601,8 @@
           "version_events": "版本 {version}：{events}",
           "general_description": "折线图展示了 {package} 包从版本 {first} 到 {last} 的 {metric} 变化情况。版本 {first} 的 {metric} 为 {first_value}，版本 {last} 为 {last_value}（整体变化 {overall_progress_percentage}%）。{key_changes} {watermark}。"
         }
-      }
+      },
+      "deprecated": "已弃用"
     },
     "dependencies": {
       "title": "依赖（{count} 个）",
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index e2b15eefb7..7fd55b3975 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -555,7 +555,8 @@
     "timeline": {
       "chart": {
         "copy_alt": {}
-      }
+      },
+      "deprecated": "已棄用"
     },
     "dependencies": {
       "title": "相依（{count} 個）",
diff --git a/i18n/schema.json b/i18n/schema.json
index b7793e498c..3dc9c82476 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1942,6 +1942,9 @@
             "provenance_removed": {
               "type": "string"
             },
+            "deprecated": {
+              "type": "string"
+            },
             "chart": {
               "type": "object",
               "properties": {
diff --git a/server/api/registry/timeline/[...pkg].get.ts b/server/api/registry/timeline/[...pkg].get.ts
index cd399ef3c8..b12594465c 100644
--- a/server/api/registry/timeline/[...pkg].get.ts
+++ b/server/api/registry/timeline/[...pkg].get.ts
@@ -11,6 +11,7 @@ export interface TimelineVersion {
   hasTypes?: boolean
   hasTrustedPublisher?: boolean
   hasProvenance?: boolean
+  deprecated?: string
   tags: string[]
 }
 
@@ -79,6 +80,7 @@ export default defineCachedEventHandler(
             // oxlint-disable-next-line eslint/no-underscore-dangle
             hasTrustedPublisher: version._npmUser?.trustedPublisher ? true : undefined,
             hasProvenance: version.dist?.attestations ? true : undefined,
+            deprecated: version.deprecated || undefined,
             tags: tagsByVersion.get(v) ?? [],
           }
         })

From 5a24cecae8319432623a11e3b85eca9e768a3b79 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Tue, 4 Aug 2026 21:26:56 +0800
Subject: [PATCH 2/2] fix: update

---
 .../package-timeline/[[org]]/[packageName].vue | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index 284deb23cb..5dac1ec9a0 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -332,13 +332,6 @@ const versionSubEvents = computed(() => {
   return result
 })
 
-// The latest deprecated version — the first deprecated entry by publish time.
-// npm registry doesn't record a separate deprecation timestamp, so the badge
-// is shown once on the newest deprecated release only.
-const latestDeprecatedVersion = computed(
-  () => timelineEntries.value.find(e => e.deprecated) ?? null,
-)
-
 const selectedVersion = shallowRef<string | null>(null)
 
 useSeoMeta({
@@ -404,7 +397,7 @@ useSeoMeta({
               {{ tag }}
             </span>
             <span
-              v-if="latestDeprecatedVersion?.version === entry.version"
+              v-if="entry.deprecated"
               class="inline-flex items-center gap-1 text-3xs font-semibold uppercase tracking-wide text-red-600 dark:text-red-400"
             >
               <span class="i-lucide:octagon-alert w-3 h-3 shrink-0" aria-hidden="true" />
@@ -420,10 +413,7 @@ useSeoMeta({
           </div>
           <!-- Sub-events -->
           <ol
-            v-if="
-              versionSubEvents.has(entry.version) ||
-              latestDeprecatedVersion?.version === entry.version
-            "
+            v-if="versionSubEvents.has(entry.version) || entry.deprecated"
             class="relative border-s border-border/50 ms-3 mt-2"
           >
             <template v-if="versionSubEvents.has(entry.version)">
@@ -452,9 +442,9 @@ useSeoMeta({
                 </p>
               </li>
             </template>
-            <!-- Deprecated message (only on the latest deprecated version) -->
+            <!-- Deprecated message (on every deprecated version, matching the versions page) -->
             <li
-              v-if="latestDeprecatedVersion?.version === entry.version"
+              v-if="entry.deprecated"
               class="ms-4 relative"
               :class="versionSubEvents.has(entry.version) ? 'mt-2' : ''"
             >