Unify organize ingest pipeline

web/src/pages/SubscriptionsPage.tsx

@@ -1,6 +1,6 @@
 import { FormEvent, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
-import { CalendarClock, CheckCircle2, Film, Pencil, Play, Plus, Save, ShieldCheck, Trash2 } from 'lucide-react'
+import { Archive, CalendarClock, CheckCircle2, Film, Pencil, Play, Plus, Save, ShieldCheck, Trash2 } from 'lucide-react'
 
 import { subscriptionsAPI } from '../api/subscriptions'
 import { imageURL } from '../api/client'
@@ -9,6 +9,7 @@ import type { Subscription } from '../types'
 
 export function SubscriptionsPage() {
   const [items, setItems] = useState<Subscription[]>([])
+  const [historyItems, setHistoryItems] = useState<Subscription[]>([])
   const [name, setName] = useState('')
   const [feed, setFeed] = useState('')
   const [filter, setFilter] = useState('')
@@ -28,9 +29,11 @@ export function SubscriptionsPage() {
   const [loading, setLoading] = useState(true)
 
   const refresh = () =>
-    subscriptionsAPI
-      .list()
-      .then(setItems)
+    Promise.all([subscriptionsAPI.list(), subscriptionsAPI.history()])
+      .then(([active, history]) => {
+        setItems(active)
+        setHistoryItems(history)
+      })
       .finally(() => setLoading(false))
 
   useEffect(() => {
@@ -311,6 +314,43 @@ export function SubscriptionsPage() {
           ))}
         </div>
       )}
+
+      {historyItems.length > 0 && (
+        <section className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Archive size={18} className="text-brand-500" />
+            <h2 className="font-display text-xl font-semibold text-ink-600">订阅历史</h2>
+            <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-ink-50">{historyItems.length} 条</span>
+          </div>
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {historyItems.map((subscription) => (
+              <article key={subscription.id} className="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm">
+                <div className="flex gap-3">
+                  <div className="h-20 w-14 flex-shrink-0 overflow-hidden rounded-xl bg-primary-400/10">
+                    {subscription.poster_url ? (
+                      <img src={imageURL(subscription.poster_url)} alt={subscription.name} className="h-full w-full object-cover" />
+                    ) : (
+                      <div className="flex h-full items-center justify-center text-brand-500">
+                        <Film size={18} />
+                      </div>
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <h3 className="truncate font-semibold text-ink-600" title={subscription.name}>{subscription.name}</h3>
+                    <p className="mt-1 text-xs text-ink-50">
+                      {subscription.archive_reason || '订阅已完成'}
+                    </p>
+                    <p className="mt-2 text-xs text-ink-100">
+                      {subscription.archived_at ? new Date(subscription.archived_at).toLocaleString() : '完成时间未知'}
+                    </p>
+                    <p className="mt-1 text-xs text-ink-50">{subscriptionProgressLabel(subscription)}</p>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </section>
+      )}
     </div>
   )
 }