feat(admin): show preview and capture images in enrichment detail

Author: Innei

apps/admin/src/views/enrichment/components/cache/cache-detail-panel.tsx

@@ -148,7 +148,6 @@ export const CacheDetailPanel = defineComponent({
         .filter(Boolean)
         .join(' · ')
       const captureMeta = row.capture
-      const normalizedCapture = row.normalized.captureImage
 
       return (
         <div class="flex h-full flex-col">
@@ -229,21 +228,6 @@ export const CacheDetailPanel = defineComponent({
                 </div>
                 {captureMeta ? (
                   <div class="space-y-2">
-                    {normalizedCapture?.url && (
-                      <a
-                        href={normalizedCapture.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="block max-w-md overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800"
-                      >
-                        <img
-                          src={normalizedCapture.url}
-                          alt="screenshot"
-                          class="w-full object-cover"
-                          loading="lazy"
-                        />
-                      </a>
-                    )}
                     <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
                       <span>
                         {captureMeta.width}×{captureMeta.height}

apps/admin/src/views/enrichment/components/cache/cache-normalized-section.tsx

@@ -1,7 +1,13 @@
 import { defineComponent } from 'vue'
-import type { EnrichmentResult } from '~/models/enrichment'
+import type { EnrichmentImage, EnrichmentResult } from '~/models/enrichment'
 import type { PropType } from 'vue'
 
+const IMAGE_FIELDS = [
+  { key: 'thumbnailImage', label: '封面图' },
+  { key: 'previewImage', label: 'OG 预览图' },
+  { key: 'captureImage', label: '截图' },
+] as const
+
 export const CacheNormalizedSection = defineComponent({
   name: 'CacheNormalizedSection',
   props: {
@@ -11,7 +17,6 @@ export const CacheNormalizedSection = defineComponent({
   setup(props) {
     return () => {
       const { result } = props
-      const image = result.thumbnailImage
       const attributes = result.attributes ?? []
       const links = result.links ?? []
       return (
@@ -30,25 +35,15 @@ export const CacheNormalizedSection = defineComponent({
                 {result.description || '—'}
               </span>
             </Field>
-            <Field label="封面图">
-              {image ? (
-                <a
-                  href={image.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="block max-w-xs overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800"
-                >
-                  <img
-                    src={image.url}
-                    alt={image.alt || ''}
-                    class="w-full object-cover"
-                    loading="lazy"
-                  />
-                </a>
-              ) : (
-                <span class="text-xs text-neutral-400">无</span>
-              )}
-            </Field>
+            {IMAGE_FIELDS.map(({ key, label }) => {
+              const img = result[key]
+              if (!img?.url) return null
+              return (
+                <Field key={key} label={label}>
+                  <ImagePreview image={img} />
+                </Field>
+              )
+            })}
             {attributes.length > 0 && (
               <Field label="属性">
                 <div class="overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800">
@@ -113,3 +108,27 @@ const Field = defineComponent({
     )
   },
 })
+
+const ImagePreview = defineComponent({
+  name: 'ImagePreview',
+  props: {
+    image: { type: Object as PropType<EnrichmentImage>, required: true },
+  },
+  setup(props) {
+    return () => (
+      <a
+        href={props.image.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="block max-w-xs overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800"
+      >
+        <img
+          src={props.image.url}
+          alt={props.image.alt || ''}
+          class="w-full object-cover"
+          loading="lazy"
+        />
+      </a>
+    )
+  },
+})