feat(shorthand): multi-enrichment preview for recently entries (#1044)

Innei · web-flow · commit d03256bd9a26 · 2026-05-15T07:31:38.000Z
The recently model now carries a URL-keyed enrichments map instead of a single enrichment. The composer detects and previews every URL, the list renders one card per enrichment, and retry re-resolves per URL.
diff --git a/apps/admin/src/api/recently.ts b/apps/admin/src/api/recently.ts
@@ -2,20 +2,8 @@ import type { RecentlyModel } from '~/models/recently'
 
 import { request } from '~/utils/request'
 
-export type RecentlyType =
-  | 'text'
-  | 'link'
-  | 'book'
-  | 'media'
-  | 'music'
-  | 'github'
-  | 'academic'
-  | 'code'
-
 export interface RecentlyCreatePayload {
-  type?: RecentlyType
-  content?: string
-  metadata?: Record<string, unknown>
+  content: string
 }
 
 export type RecentlyUpdatePayload = RecentlyCreatePayload
diff --git a/apps/admin/src/components/shorthand/index.tsx b/apps/admin/src/components/shorthand/index.tsx
@@ -10,26 +10,29 @@ import { recentlyApi } from '~/api'
 import { enrichmentApi } from '~/api/enrichment'
 import { EnrichmentCard } from '~/components/enrichment-card'
 
-const URL_REGEX = /https?:\/\/\S+/i
-// Trailing punctuation that should not be part of the URL (ASCII + CJK)
+const URL_REGEX = /https?:\/\/\S+/gi
 const URL_TAIL_TRIM = /[)\].,;:!?'"`>}）。，、；：！？「」『』《》〉〕—…]+$/
 
-function firstUrl(text: string): string | null {
-  const m = text.match(URL_REGEX)
-  if (!m) return null
-  let url = m[0]
-  // Strip trailing punctuation iteratively (handles "(url).")
-  while (URL_TAIL_TRIM.test(url)) {
-    url = url.replace(URL_TAIL_TRIM, '')
+function extractUrls(text: string): string[] {
+  const matches = text.match(URL_REGEX)
+  if (!matches) return []
+  const seen = new Set<string>()
+  const result: string[] = []
+  for (let url of matches) {
+    while (URL_TAIL_TRIM.test(url)) {
+      url = url.replace(URL_TAIL_TRIM, '')
+    }
+    if (url && !seen.has(url)) {
+      seen.add(url)
+      result.push(url)
+    }
   }
-  return url || null
+  return result
 }
 
 function cleanErrorMessage(raw: string | null | undefined): string {
   if (!raw) return '解析失败'
-  // Strip embedded URLs (often docs links) and excess whitespace
   let msg = raw.replace(/https?:\/\/\S+/g, '').trim()
-  // Common patterns we shorten
   if (/\(404\)|\b404\b/.test(msg)) {
     return '404 — 资源不存在，或私有内容无访问权（请检查 GitHub Token 等凭证）'
   }
@@ -42,21 +45,18 @@ function cleanErrorMessage(raw: string | null | undefined): string {
   if (/Token missing/i.test(msg)) {
     return '此 provider 需配置凭证（请至「第三方集成」设置）'
   }
-  // Generic fallback — cap length
   msg = msg.replace(/[\s—-]+$/, '').trim()
   return msg.length > 100 ? msg.slice(0, 100) + '…' : msg || '解析失败'
 }
 
-function buildPayload(text: string): {
-  type: 'text' | 'link'
-  content: string
-  metadata?: { url: string }
-} {
-  const url = firstUrl(text)
-  if (url) {
-    return { type: 'link', content: text, metadata: { url } }
-  }
-  return { type: 'text', content: text }
+function buildPayload(text: string): { content: string } {
+  return { content: text }
+}
+
+interface UrlPreviewState {
+  loading: boolean
+  result: EnrichmentResult | null
+  error: string | null
 }
 
 const ShorthandForm = defineComponent({
@@ -70,56 +70,61 @@ const ShorthandForm = defineComponent({
   },
   setup(props) {
     const text = ref(props.initialContent)
-    const detectedUrl = ref<string | null>(null)
-    const previewLoading = ref(false)
-    const previewResult = ref<EnrichmentResult | null>(null)
-    const previewError = ref<string | null>(null)
+    const detectedUrls = ref<string[]>([])
+    const previewStates = ref<Map<string, UrlPreviewState>>(new Map())
     let debounceTimer: ReturnType<typeof setTimeout> | null = null
+    let generation = 0
 
-    const triggerResolve = (url: string) => {
-      previewLoading.value = true
-      previewError.value = null
-      // cancel previous in-flight via stale check
-      const myUrl = url
+    const resolveUrl = (url: string, gen: number) => {
+      const state: UrlPreviewState = { loading: true, result: null, error: null }
+      previewStates.value = new Map(previewStates.value).set(url, state)
       enrichmentApi
         .resolve(url)
         .then((result) => {
-          if (detectedUrl.value !== myUrl) return
-          previewResult.value = result
-          previewError.value = null
+          if (gen !== generation) return
+          previewStates.value = new Map(previewStates.value).set(url, {
+            loading: false,
+            result,
+            error: null,
+          })
         })
         .catch((e: any) => {
-          if (detectedUrl.value !== myUrl) return
-          previewResult.value = null
-          previewError.value = e?.message || '解析失败'
-        })
-        .finally(() => {
-          if (detectedUrl.value !== myUrl) return
-          previewLoading.value = false
+          if (gen !== generation) return
+          previewStates.value = new Map(previewStates.value).set(url, {
+            loading: false,
+            result: null,
+            error: e?.message || '解析失败',
+          })
         })
     }
 
     watch(
       text,
       (val) => {
         props.onUpdate(val)
-        const url = firstUrl(val)
-        if (url !== detectedUrl.value) {
-          detectedUrl.value = url
-          previewResult.value = null
-          previewError.value = null
-          previewLoading.value = false
-          if (debounceTimer) clearTimeout(debounceTimer)
-          if (url) {
-            debounceTimer = setTimeout(() => triggerResolve(url), 500)
-          }
+        const urls = extractUrls(val)
+        const prev = detectedUrls.value
+        const same =
+          urls.length === prev.length && urls.every((u, i) => u === prev[i])
+        if (same) return
+
+        detectedUrls.value = urls
+        previewStates.value = new Map()
+        if (debounceTimer) clearTimeout(debounceTimer)
+        if (urls.length > 0) {
+          generation++
+          const gen = generation
+          debounceTimer = setTimeout(() => {
+            for (const url of urls) resolveUrl(url, gen)
+          }, 500)
         }
       },
       { immediate: true },
     )
 
     onBeforeUnmount(() => {
       if (debounceTimer) clearTimeout(debounceTimer)
+      generation++
     })
 
     return () => (
@@ -132,33 +137,43 @@ const ShorthandForm = defineComponent({
           autosize={{ minRows: 4, maxRows: 12 }}
         />
 
-        {detectedUrl.value && (
-          <div>
-            <div class="mb-1.5 flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400">
-              <span>检测到链接：</span>
-              <code class="truncate rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[11px] dark:bg-neutral-800">
-                {detectedUrl.value}
-              </code>
-              {previewLoading.value && (
-                <LoaderIcon class="size-3 animate-spin" aria-hidden="true" />
-              )}
-            </div>
+        {detectedUrls.value.length > 0 && (
+          <div class="space-y-2">
+            {detectedUrls.value.map((url) => {
+              const state = previewStates.value.get(url)
+              return (
+                <div key={url}>
+                  <div class="mb-1.5 flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400">
+                    <span>检测到链接：</span>
+                    <code class="truncate rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[11px] dark:bg-neutral-800">
+                      {url}
+                    </code>
+                    {state?.loading && (
+                      <LoaderIcon
+                        class="size-3 animate-spin"
+                        aria-hidden="true"
+                      />
+                    )}
+                  </div>
 
-            {previewResult.value && (
-              <EnrichmentCard enrichment={previewResult.value} />
-            )}
+                  {state?.result && (
+                    <EnrichmentCard enrichment={state.result} />
+                  )}
 
-            {previewError.value && !previewLoading.value && (
-              <div class="rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2 text-xs text-neutral-500 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400">
-                <div class="font-medium text-neutral-700 dark:text-neutral-300">
-                  未识别该链接
-                </div>
-                <div class="mt-0.5">
-                  {cleanErrorMessage(previewError.value)}
+                  {state?.error && !state.loading && (
+                    <div class="rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2 text-xs text-neutral-500 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400">
+                      <div class="font-medium text-neutral-700 dark:text-neutral-300">
+                        未识别该链接
+                      </div>
+                      <div class="mt-0.5">{cleanErrorMessage(state.error)}</div>
+                      <div class="mt-1 text-neutral-400">
+                        仍可保存，按链接处理。
+                      </div>
+                    </div>
+                  )}
                 </div>
-                <div class="mt-1 text-neutral-400">仍可保存，按链接处理。</div>
-              </div>
-            )}
+              )
+            })}
           </div>
         )}
       </div>
diff --git a/apps/admin/src/models/recently.ts b/apps/admin/src/models/recently.ts
@@ -22,9 +22,7 @@ export interface RecentlyModel {
   refId?: string
   refType?: RecentlyRefTypes
 
-  enrichmentProvider?: string | null
-  enrichmentExternalId?: string | null
-  enrichment?: EnrichmentResult | null
+  enrichments?: Record<string, EnrichmentResult>
 
   up: number
   down: number
diff --git a/apps/admin/src/views/shorthand/index.tsx b/apps/admin/src/views/shorthand/index.tsx
@@ -57,35 +57,30 @@ const RecentlyItem = defineComponent({
     },
     onEnrichmentUpdate: {
       type: Function as PropType<
-        (next: NonNullable<RecentlyModel['enrichment']>) => void
+        (url: string, next: NonNullable<RecentlyModel['enrichments']>[string]) => void
       >,
       required: true,
     },
   },
   setup(props) {
     const totalVotes = computed(() => props.item.up + props.item.down)
-    const retrying = ref(false)
-    const handleRetryEnrichment = async () => {
-      const provider = props.item.enrichmentProvider
-      const externalId = props.item.enrichmentExternalId
-      if (!provider || !externalId) return
-      retrying.value = true
+    const retryingUrls = ref<Set<string>>(new Set())
+
+    const handleRetryUrl = async (url: string) => {
+      retryingUrls.value = new Set(retryingUrls.value).add(url)
       try {
-        const result = await enrichmentApi.refresh(provider, externalId)
-        props.onEnrichmentUpdate(result)
+        const result = await enrichmentApi.resolve(url)
+        props.onEnrichmentUpdate(url, result)
         toast.success('已刷新')
       } catch (e: any) {
         toast.error(e?.message || '刷新失败')
       } finally {
-        retrying.value = false
+        const next = new Set(retryingUrls.value)
+        next.delete(url)
+        retryingUrls.value = next
       }
     }
-    const enrichmentFailed = computed(
-      () =>
-        !!props.item.enrichmentProvider &&
-        !!props.item.enrichmentExternalId &&
-        !props.item.enrichment,
-    )
+
     const upPercentage = computed(() =>
       totalVotes.value > 0
         ? Math.round((props.item.up / totalVotes.value) * 100)
@@ -103,18 +98,19 @@ const RecentlyItem = defineComponent({
           <p class={styles.text}>{props.item.content}</p>
         </div>
 
-        {(props.item.enrichment || enrichmentFailed.value) && (
-          <div class="mt-2">
-            <EnrichmentCard
-              enrichment={props.item.enrichment}
-              provider={props.item.enrichmentProvider ?? undefined}
-              externalId={props.item.enrichmentExternalId ?? undefined}
-              failed={enrichmentFailed.value}
-              retrying={retrying.value}
-              onRetry={handleRetryEnrichment}
-            />
-          </div>
-        )}
+        {props.item.enrichments &&
+          Object.keys(props.item.enrichments).length > 0 && (
+            <div class="mt-2 space-y-2">
+              {Object.entries(props.item.enrichments).map(([url, enrichment]) => (
+                <EnrichmentCard
+                  key={url}
+                  enrichment={enrichment}
+                  retrying={retryingUrls.value.has(url)}
+                  onRetry={() => handleRetryUrl(url)}
+                />
+              ))}
+            </div>
+          )}
 
         {props.item.ref && props.item.refType && (
           <div class={styles.reference}>
@@ -346,8 +342,11 @@ export default defineComponent({
                     toast.success('删除成功')
                     data.value.splice(data.value.indexOf(item), 1)
                   }}
-                  onEnrichmentUpdate={(next) => {
-                    data.value[index] = { ...item, enrichment: next }
+                  onEnrichmentUpdate={(url, next) => {
+                    data.value[index] = {
+                      ...item,
+                      enrichments: { ...item.enrichments, [url]: next },
+                    }
                   }}
                 />
               ))}
