From 5d6a4260138144cce38d4f8e80c6daf571569c5a Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Wed, 22 Jul 2026 18:49:09 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E5=90=8E=E5=8F=B0=E7=B2=BE?=
 =?UTF-8?q?=E9=80=89=E5=AE=A1=E6=A0=B8=E7=B4=A0=E6=9D=90=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

抽取后台素材媒体共享组件并统一懒换签与限流重试
为精选审核补充列表和详情中的素材预览交互
透传精选素材缩略图字段并覆盖历史 OSS 地址回归
同步后台预览数据契约与排障文档
---
 apps/admin-web/src/api/adminApiTypes.ts       |   1 +
 .../src/components/AdminEditorAssetMedia.tsx  | 436 +++++++++++++++++
 .../src/pages/AdminEditorAssetQueryPage.tsx   | 458 +-----------------
 .../AdminEditorShowcaseReviewPage.test.tsx    | 201 +++++++-
 .../pages/AdminEditorShowcaseReviewPage.tsx   | 152 ++----
 docs/project-memory/shared-memory/pitfalls.md |  10 +-
 ...�】server-rs与SpacetimeDB数据契约-2026-05-15.md |   1 +
 ...��作】创作主页与项目入口改版计划-2026-06-18.md |   1 +
 server-rs/crates/api-server/src/admin.rs      |  13 +-
 .../crates/shared-contracts/src/admin.rs      |   7 +
 10 files changed, 722 insertions(+), 558 deletions(-)
 create mode 100644 apps/admin-web/src/components/AdminEditorAssetMedia.tsx

diff --git a/apps/admin-web/src/api/adminApiTypes.ts b/apps/admin-web/src/api/adminApiTypes.ts
index 62de75fc8..879af5c51 100644
--- a/apps/admin-web/src/api/adminApiTypes.ts
+++ b/apps/admin-web/src/api/adminApiTypes.ts
@@ -372,6 +372,7 @@ export interface AdminEditorShowcaseAssetPayload {
   taskId?: string | null;
   assetKind?: string | null;
   generationInputs?: Record<string, unknown> | null;
+  thumbnailSrc?: string | null;
   generationCostMudPoints: number;
   refundMudPoints: number;
   reviewStatus: 'pending' | 'approved' | 'rejected' | string;
diff --git a/apps/admin-web/src/components/AdminEditorAssetMedia.tsx b/apps/admin-web/src/components/AdminEditorAssetMedia.tsx
new file mode 100644
index 000000000..9e93be572
--- /dev/null
+++ b/apps/admin-web/src/components/AdminEditorAssetMedia.tsx
@@ -0,0 +1,436 @@
+import { X } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+
+import type { AdminAssetReadUrlResponse } from '../api/adminApiClient';
+import { getAdminAssetReadUrl, isAdminApiError } from '../api/adminApiClient';
+
+const ADMIN_ASSET_READ_EXPIRE_SECONDS = 300;
+const ADMIN_ASSET_READ_DISPATCH_SPACING_MS = 40;
+const ADMIN_ASSET_READ_RETRY_DELAYS_MS = [400, 1_200, 3_000] as const;
+const ADMIN_ASSET_THUMBNAIL_ROOT_MARGIN = '240px 0px';
+const AUDIO_ASSET_COVER_SRC = `${import.meta.env.DEV ? import.meta.env.BASE_URL : '/'}creation-home/audio-asset-cover.png`;
+let adminAssetReadDispatchTail = Promise.resolve();
+
+export interface AdminPreviewableEditorAsset {
+  assetId: string;
+  label: string;
+  imageSrc: string;
+  objectKey?: string | null;
+  assetKind?: string | null;
+  thumbnailSrc?: string | null;
+}
+
+export function AdminEditorAssetThumbnail({
+  entry,
+  token,
+  altPrefix = '素材',
+}: {
+  entry: AdminPreviewableEditorAsset;
+  token: string;
+  altPrefix?: string;
+}) {
+  const thumbnailSource = resolveAdminAssetThumbnailSource(entry);
+  const { observeElement, shouldLoad } = useAdminAssetThumbnailVisibility();
+  const imageSrc = useAdminResolvedAssetUrl(
+    token,
+    thumbnailSource.src,
+    thumbnailSource.objectKey,
+    shouldLoad,
+  );
+  const alt = `${altPrefix}：${entry.label || entry.assetId}`;
+
+  return imageSrc ? (
+    <img
+      ref={observeElement}
+      alt={alt}
+      className="admin-asset-query-thumb"
+      src={imageSrc}
+    />
+  ) : (
+    <div
+      ref={observeElement}
+      className="admin-asset-query-thumb admin-asset-query-thumb-placeholder"
+    />
+  );
+}
+
+export function AdminEditorAssetPreviewDialog({
+  entry,
+  token,
+  onClose,
+}: {
+  entry: AdminPreviewableEditorAsset;
+  token: string;
+  onClose: () => void;
+}) {
+  return (
+    <div className="admin-confirm-backdrop" role="presentation">
+      <section
+        aria-label="素材预览"
+        className="admin-detail-panel admin-asset-query-preview-dialog"
+        role="dialog"
+      >
+        <div className="admin-panel-heading">
+          <div>
+            <h3>{entry.label || entry.assetId}</h3>
+            <span>{entry.assetId}</span>
+          </div>
+          <button
+            aria-label="关闭素材预览"
+            className="admin-ghost-button"
+            type="button"
+            onClick={onClose}
+          >
+            <X size={17} aria-hidden="true" />
+          </button>
+        </div>
+        <AdminEditorAssetPreviewMedia entry={entry} token={token} />
+      </section>
+    </div>
+  );
+}
+
+function AdminEditorAssetPreviewMedia({
+  entry,
+  token,
+}: {
+  entry: AdminPreviewableEditorAsset;
+  token: string;
+}) {
+  const mediaKind = resolveAdminAssetMediaKind(entry);
+  const isAudio = mediaKind === 'audio';
+  const isVideo = mediaKind === 'video';
+  const mediaSrc = useAdminResolvedAssetUrl(
+    token,
+    entry.imageSrc,
+    entry.objectKey,
+  );
+  const posterSrc = useAdminResolvedAssetUrl(
+    token,
+    isVideo ? (entry.thumbnailSrc ?? '') : '',
+    null,
+  );
+  const label = entry.label || entry.assetId;
+
+  if (isAudio) {
+    return (
+      <div className="admin-asset-query-preview-audio">
+        <img
+          alt={`音频封面：${label}`}
+          className="admin-asset-query-preview-cover"
+          src={AUDIO_ASSET_COVER_SRC}
+        />
+        {mediaSrc ? (
+          <audio
+            aria-label={`音频预览：${label}`}
+            className="admin-asset-query-preview-player"
+            controls
+            preload="metadata"
+            src={mediaSrc}
+          />
+        ) : (
+          <div className="admin-asset-query-preview-placeholder" />
+        )}
+      </div>
+    );
+  }
+
+  if (isVideo) {
+    return mediaSrc ? (
+      <video
+        aria-label={`视频预览：${label}`}
+        className="admin-asset-query-preview-media"
+        controls
+        playsInline
+        poster={posterSrc || undefined}
+        preload="metadata"
+        src={mediaSrc}
+      />
+    ) : (
+      <div className="admin-asset-query-preview-placeholder" />
+    );
+  }
+
+  return mediaSrc ? (
+    <img
+      alt={`图片预览：${label}`}
+      className="admin-asset-query-preview-media"
+      src={mediaSrc}
+    />
+  ) : (
+    <div className="admin-asset-query-preview-placeholder" />
+  );
+}
+
+function resolveAdminAssetThumbnailSource(entry: AdminPreviewableEditorAsset) {
+  const mediaKind = resolveAdminAssetMediaKind(entry);
+  if (mediaKind === 'audio') {
+    return { src: AUDIO_ASSET_COVER_SRC, objectKey: null };
+  }
+  if (mediaKind === 'video') {
+    return { src: entry.thumbnailSrc || '', objectKey: null };
+  }
+  if (entry.thumbnailSrc?.trim()) {
+    return {
+      src: entry.thumbnailSrc,
+      objectKey: adminAssetPathsMatch(entry.thumbnailSrc, entry.imageSrc)
+        ? entry.objectKey
+        : null,
+    };
+  }
+  return {
+    src: entry.imageSrc,
+    objectKey: entry.objectKey,
+  };
+}
+
+function useAdminAssetThumbnailVisibility() {
+  const [element, setElement] = useState<HTMLElement | null>(null);
+  const [shouldLoad, setShouldLoad] = useState(false);
+  const observeElement = useCallback((nextElement: HTMLElement | null) => {
+    setElement(nextElement);
+  }, []);
+
+  useEffect(() => {
+    if (shouldLoad || !element) {
+      return;
+    }
+    if (typeof IntersectionObserver === 'undefined') {
+      setShouldLoad(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setShouldLoad(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: ADMIN_ASSET_THUMBNAIL_ROOT_MARGIN },
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element, shouldLoad]);
+
+  return { observeElement, shouldLoad };
+}
+
+type AdminAssetMediaKind = 'image' | 'audio' | 'video';
+
+function resolveAdminAssetMediaKind(
+  entry: AdminPreviewableEditorAsset,
+): AdminAssetMediaKind {
+  const pathMediaKind =
+    resolveAdminAssetMediaKindFromPath(entry.imageSrc) ??
+    resolveAdminAssetMediaKindFromPath(entry.objectKey ?? '');
+  if (pathMediaKind) {
+    return pathMediaKind;
+  }
+
+  const assetKind = entry.assetKind?.trim() ?? '';
+  if (
+    assetKind === 'sound-effect' ||
+    assetKind === 'background-music' ||
+    assetKind === 'editor_uploaded_audio'
+  ) {
+    return 'audio';
+  }
+  if (
+    assetKind === 'video' ||
+    assetKind === 'editor_video' ||
+    assetKind === 'editor-video' ||
+    assetKind === 'editor_uploaded_video'
+  ) {
+    return 'video';
+  }
+  return 'image';
+}
+
+function resolveAdminAssetMediaKindFromPath(
+  value: string,
+): AdminAssetMediaKind | null {
+  const normalizedValue = value.trim();
+  if (/^data:image\//iu.test(normalizedValue)) {
+    return 'image';
+  }
+  if (/^data:audio\//iu.test(normalizedValue)) {
+    return 'audio';
+  }
+  if (/^data:video\//iu.test(normalizedValue)) {
+    return 'video';
+  }
+  if (
+    /\.(?:avif|bmp|gif|jpe?g|png|svg|webp)(?:$|[?#])/iu.test(normalizedValue)
+  ) {
+    return 'image';
+  }
+  if (/\.(?:aac|flac|m4a|mp3|ogg|opus|wav)(?:$|[?#])/iu.test(normalizedValue)) {
+    return 'audio';
+  }
+  if (/\.(?:m4v|mov|mp4|ogv|webm)(?:$|[?#])/iu.test(normalizedValue)) {
+    return 'video';
+  }
+  return null;
+}
+
+function useAdminResolvedAssetUrl(
+  token: string,
+  imageSrc: string | null | undefined,
+  objectKey: string | null | undefined,
+  enabled = true,
+) {
+  const normalizedImageSrc = imageSrc?.trim() ?? '';
+  const normalizedObjectKey = normalizeAdminObjectKey(objectKey);
+  const normalizedLegacyPublicPath = isGeneratedLegacyPath(normalizedImageSrc)
+    ? normalizedImageSrc
+    : resolveAdminGeneratedLegacyPathFromUrl(normalizedImageSrc);
+  const shouldResolve =
+    Boolean(normalizedObjectKey) || Boolean(normalizedLegacyPublicPath);
+  const [resolvedImageSrc, setResolvedImageSrc] = useState(
+    shouldResolve ? '' : normalizedImageSrc,
+  );
+
+  useEffect(() => {
+    if (!normalizedImageSrc && !normalizedObjectKey) {
+      setResolvedImageSrc('');
+      return;
+    }
+    if (!shouldResolve) {
+      setResolvedImageSrc(normalizedImageSrc);
+      return;
+    }
+    if (!enabled) {
+      setResolvedImageSrc('');
+      return;
+    }
+
+    let cancelled = false;
+    let retryTimer: ReturnType<typeof setTimeout> | null = null;
+    let retryIndex = 0;
+    const dispatchController = new AbortController();
+    setResolvedImageSrc('');
+
+    const resolveReadUrl = async () => {
+      try {
+        await waitForAdminAssetReadDispatch(dispatchController.signal);
+        if (cancelled) {
+          return;
+        }
+        const response = await getAdminAssetReadUrl(
+          token,
+          normalizedObjectKey
+            ? {
+                objectKey: normalizedObjectKey,
+                expireSeconds: ADMIN_ASSET_READ_EXPIRE_SECONDS,
+              }
+            : {
+                legacyPublicPath: normalizedLegacyPublicPath,
+                expireSeconds: ADMIN_ASSET_READ_EXPIRE_SECONDS,
+              },
+        );
+        if (!cancelled) {
+          setResolvedImageSrc(resolveAdminAssetReadSignedUrl(response));
+        }
+      } catch (error: unknown) {
+        if (cancelled) {
+          return;
+        }
+        const retryDelay = ADMIN_ASSET_READ_RETRY_DELAYS_MS[retryIndex];
+        if (
+          isAdminApiError(error) &&
+          error.status === 429 &&
+          typeof retryDelay === 'number'
+        ) {
+          retryIndex += 1;
+          retryTimer = setTimeout(() => void resolveReadUrl(), retryDelay);
+          return;
+        }
+        setResolvedImageSrc('');
+      }
+    };
+
+    void resolveReadUrl();
+
+    return () => {
+      cancelled = true;
+      dispatchController.abort();
+      if (retryTimer !== null) {
+        clearTimeout(retryTimer);
+      }
+    };
+  }, [
+    enabled,
+    normalizedImageSrc,
+    normalizedLegacyPublicPath,
+    normalizedObjectKey,
+    shouldResolve,
+    token,
+  ]);
+
+  return resolvedImageSrc;
+}
+
+async function waitForAdminAssetReadDispatch(signal: AbortSignal) {
+  const dispatch = adminAssetReadDispatchTail.then(
+    () => waitForAdminAssetReadDispatchSpacing(signal),
+    () => waitForAdminAssetReadDispatchSpacing(signal),
+  );
+  adminAssetReadDispatchTail = dispatch.catch(() => undefined);
+  await dispatch;
+}
+
+async function waitForAdminAssetReadDispatchSpacing(signal: AbortSignal) {
+  if (signal.aborted) {
+    throw new DOMException('The operation was aborted.', 'AbortError');
+  }
+  await new Promise<void>((resolve, reject) => {
+    const timer = setTimeout(() => {
+      signal.removeEventListener('abort', handleAbort);
+      resolve();
+    }, ADMIN_ASSET_READ_DISPATCH_SPACING_MS);
+
+    function handleAbort() {
+      clearTimeout(timer);
+      reject(new DOMException('The operation was aborted.', 'AbortError'));
+    }
+
+    signal.addEventListener('abort', handleAbort, { once: true });
+  });
+}
+
+function normalizeAdminObjectKey(value: string | null | undefined) {
+  return value?.trim().replace(/^\/+/u, '') ?? '';
+}
+
+function adminAssetPathsMatch(left: string, right: string) {
+  return (
+    left.trim().replace(/^\/+|[?#].*$/gu, '') ===
+    right.trim().replace(/^\/+|[?#].*$/gu, '')
+  );
+}
+
+function isGeneratedLegacyPath(value: string) {
+  return /^\/?generated-[^/?#]+\/.+/u.test(value.trim());
+}
+
+function resolveAdminGeneratedLegacyPathFromUrl(value: string) {
+  try {
+    const parsedUrl = new URL(value);
+    if (
+      parsedUrl.protocol !== 'https:' ||
+      !/^[^.]+\.oss-[^.]+\.aliyuncs\.com$/iu.test(parsedUrl.hostname)
+    ) {
+      return '';
+    }
+    const legacyPublicPath = decodeURIComponent(parsedUrl.pathname);
+    return isGeneratedLegacyPath(legacyPublicPath) ? legacyPublicPath : '';
+  } catch {
+    return '';
+  }
+}
+
+function resolveAdminAssetReadSignedUrl(response: AdminAssetReadUrlResponse) {
+  const read = response.read ?? response;
+  return typeof read.signedUrl === 'string' ? read.signedUrl.trim() : '';
+}
diff --git a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx
index bd3a7e12d..53eb3676e 100644
--- a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx
+++ b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx
@@ -1,17 +1,23 @@
-import { ChevronDown, ChevronRight, Eye, FileText, RefreshCcw, X } from 'lucide-react';
-import { Fragment, type ReactNode } from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import type { AdminAssetReadUrlResponse } from '../api/adminApiClient';
 import {
-  getAdminAssetReadUrl,
-  isAdminApiError,
-  listAdminEditorAssets,
-} from '../api/adminApiClient';
+  ChevronDown,
+  ChevronRight,
+  Eye,
+  FileText,
+  RefreshCcw,
+  X,
+} from 'lucide-react';
+import { Fragment, type ReactNode } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import { listAdminEditorAssets } from '../api/adminApiClient';
 import type {
   AdminEditorAssetListQuery,
   AdminEditorAssetPayload,
 } from '../api/adminApiTypes';
+import {
+  AdminEditorAssetPreviewDialog,
+  AdminEditorAssetThumbnail,
+} from '../components/AdminEditorAssetMedia';
 import { AdminUserReferenceButton } from '../components/AdminUserReferenceButton';
 import { handlePageError } from './pageUtils';
 
@@ -20,13 +26,7 @@ interface AdminEditorAssetQueryPageProps {
   onUnauthorized: (message?: string) => void;
 }
 
-const ADMIN_ASSET_READ_EXPIRE_SECONDS = 300;
-const ADMIN_ASSET_READ_DISPATCH_SPACING_MS = 40;
-const ADMIN_ASSET_READ_RETRY_DELAYS_MS = [400, 1_200, 3_000] as const;
-const ADMIN_ASSET_THUMBNAIL_ROOT_MARGIN = '240px 0px';
 const ADMIN_EDITOR_ASSET_FILTER_DEBOUNCE_MS = 300;
-const AUDIO_ASSET_COVER_SRC = `${import.meta.env.DEV ? import.meta.env.BASE_URL : '/'}creation-home/audio-asset-cover.png`;
-let adminAssetReadDispatchTail = Promise.resolve();
 
 export function AdminEditorAssetQueryPage({
   token,
@@ -286,7 +286,9 @@ export function AdminEditorAssetQueryPage({
                         <div className="admin-asset-query-resource-cell">
                           {children.length ? (
                             <button
-                              aria-label={expanded ? '收起中间产物' : '展开中间产物'}
+                              aria-label={
+                                expanded ? '收起中间产物' : '展开中间产物'
+                              }
                               className="admin-asset-query-expand-button"
                               type="button"
                               onClick={() =>
@@ -317,7 +319,10 @@ export function AdminEditorAssetQueryPage({
                               type="button"
                               onClick={() => setPreviewEntry(entry)}
                             >
-                              <AdminAssetThumbnail entry={entry} token={token} />
+                              <AdminEditorAssetThumbnail
+                                entry={entry}
+                                token={token}
+                              />
                             </button>
                             <small>{entry.label || '-'}</small>
                           </div>
@@ -379,7 +384,7 @@ export function AdminEditorAssetQueryPage({
                                       type="button"
                                       onClick={() => setPreviewEntry(child)}
                                     >
-                                      <AdminAssetThumbnail
+                                      <AdminEditorAssetThumbnail
                                         entry={child}
                                         token={token}
                                       />
@@ -452,7 +457,7 @@ export function AdminEditorAssetQueryPage({
       ) : null}
 
       {previewEntry ? (
-        <AdminAssetPreviewDialog
+        <AdminEditorAssetPreviewDialog
           entry={previewEntry}
           token={token}
           onClose={() => setPreviewEntry(null)}
@@ -518,150 +523,6 @@ function AdminAssetPromptButton({
   );
 }
 
-function AdminAssetThumbnail({
-  entry,
-  token,
-}: {
-  entry: AdminEditorAssetPayload;
-  token: string;
-}) {
-  const thumbnailSource = resolveAdminAssetThumbnailSource(entry);
-  const { observeElement, shouldLoad } = useAdminAssetThumbnailVisibility();
-  const imageSrc = useAdminResolvedAssetUrl(
-    token,
-    thumbnailSource.src,
-    thumbnailSource.objectKey,
-    shouldLoad,
-  );
-  const alt = `素材：${entry.label || entry.assetId}`;
-
-  return imageSrc ? (
-    <img
-      ref={observeElement}
-      alt={alt}
-      className="admin-asset-query-thumb"
-      src={imageSrc}
-    />
-  ) : (
-    <div
-      ref={observeElement}
-      className="admin-asset-query-thumb admin-asset-query-thumb-placeholder"
-    />
-  );
-}
-
-function resolveAdminAssetThumbnailSource(entry: AdminEditorAssetPayload) {
-  const mediaKind = resolveAdminAssetMediaKind(entry);
-  if (mediaKind === 'audio') {
-    return { src: AUDIO_ASSET_COVER_SRC, objectKey: null };
-  }
-  if (mediaKind === 'video') {
-    return { src: entry.thumbnailSrc || '', objectKey: null };
-  }
-  if (entry.thumbnailSrc?.trim()) {
-    return {
-      src: entry.thumbnailSrc,
-      objectKey: adminAssetPathsMatch(entry.thumbnailSrc, entry.imageSrc)
-        ? entry.objectKey
-        : null,
-    };
-  }
-  return {
-    src: entry.imageSrc,
-    objectKey: entry.objectKey,
-  };
-}
-
-function useAdminAssetThumbnailVisibility() {
-  const [element, setElement] = useState<HTMLElement | null>(null);
-  const [shouldLoad, setShouldLoad] = useState(false);
-  const observeElement = useCallback((nextElement: HTMLElement | null) => {
-    setElement(nextElement);
-  }, []);
-
-  useEffect(() => {
-    if (shouldLoad || !element) {
-      return;
-    }
-    if (typeof IntersectionObserver === 'undefined') {
-      setShouldLoad(true);
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries.some((entry) => entry.isIntersecting)) {
-          setShouldLoad(true);
-          observer.disconnect();
-        }
-      },
-      { rootMargin: ADMIN_ASSET_THUMBNAIL_ROOT_MARGIN },
-    );
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, [element, shouldLoad]);
-
-  return { observeElement, shouldLoad };
-}
-
-type AdminAssetMediaKind = 'image' | 'audio' | 'video';
-
-function resolveAdminAssetMediaKind(
-  entry: AdminEditorAssetPayload,
-): AdminAssetMediaKind {
-  const pathMediaKind =
-    resolveAdminAssetMediaKindFromPath(entry.imageSrc) ??
-    resolveAdminAssetMediaKindFromPath(entry.objectKey ?? '');
-  if (pathMediaKind) {
-    return pathMediaKind;
-  }
-
-  const assetKind = entry.assetKind?.trim() ?? '';
-  if (
-    assetKind === 'sound-effect' ||
-    assetKind === 'background-music' ||
-    assetKind === 'editor_uploaded_audio'
-  ) {
-    return 'audio';
-  }
-  if (
-    assetKind === 'video' ||
-    assetKind === 'editor_video' ||
-    assetKind === 'editor-video' ||
-    assetKind === 'editor_uploaded_video'
-  ) {
-    return 'video';
-  }
-  return 'image';
-}
-
-function resolveAdminAssetMediaKindFromPath(
-  value: string,
-): AdminAssetMediaKind | null {
-  const normalizedValue = value.trim();
-  if (/^data:image\//iu.test(normalizedValue)) {
-    return 'image';
-  }
-  if (/^data:audio\//iu.test(normalizedValue)) {
-    return 'audio';
-  }
-  if (/^data:video\//iu.test(normalizedValue)) {
-    return 'video';
-  }
-  if (
-    /\.(?:avif|bmp|gif|jpe?g|png|svg|webp)(?:$|[?#])/iu.test(normalizedValue)
-  ) {
-    return 'image';
-  }
-  if (/\.(?:aac|flac|m4a|mp3|ogg|opus|wav)(?:$|[?#])/iu.test(normalizedValue)) {
-    return 'audio';
-  }
-  if (/\.(?:m4v|mov|mp4|ogv|webm)(?:$|[?#])/iu.test(normalizedValue)) {
-    return 'video';
-  }
-  return null;
-}
-
 function AdminAssetDetailDialog({
   entry,
   token,
@@ -706,7 +567,7 @@ function AdminAssetDetailDialog({
             type="button"
             onClick={() => onPreview(entry)}
           >
-            <AdminAssetThumbnail entry={entry} token={token} />
+            <AdminEditorAssetThumbnail entry={entry} token={token} />
           </button>
           <dl className="admin-info-list admin-detail-list">
             <AdminInfoItem label="作者">
@@ -798,114 +659,6 @@ function stageGenerationCostLabel(entry: AdminEditorAssetPayload) {
     : '本阶段不额外扣费';
 }
 
-function AdminAssetPreviewDialog({
-  entry,
-  token,
-  onClose,
-}: {
-  entry: AdminEditorAssetPayload;
-  token: string;
-  onClose: () => void;
-}) {
-  return (
-    <div className="admin-confirm-backdrop" role="presentation">
-      <section
-        aria-label="素材预览"
-        className="admin-detail-panel admin-asset-query-preview-dialog"
-        role="dialog"
-      >
-        <div className="admin-panel-heading">
-          <div>
-            <h3>{entry.label || entry.assetId}</h3>
-            <span>{entry.assetId}</span>
-          </div>
-          <button
-            aria-label="关闭素材预览"
-            className="admin-ghost-button"
-            type="button"
-            onClick={onClose}
-          >
-            <X size={17} aria-hidden="true" />
-          </button>
-        </div>
-        <AdminAssetPreviewMedia entry={entry} token={token} />
-      </section>
-    </div>
-  );
-}
-
-function AdminAssetPreviewMedia({
-  entry,
-  token,
-}: {
-  entry: AdminEditorAssetPayload;
-  token: string;
-}) {
-  const mediaKind = resolveAdminAssetMediaKind(entry);
-  const isAudio = mediaKind === 'audio';
-  const isVideo = mediaKind === 'video';
-  const mediaSrc = useAdminResolvedAssetUrl(
-    token,
-    entry.imageSrc,
-    entry.objectKey,
-  );
-  const posterSrc = useAdminResolvedAssetUrl(
-    token,
-    isVideo ? (entry.thumbnailSrc ?? '') : '',
-    null,
-  );
-  const label = entry.label || entry.assetId;
-
-  if (isAudio) {
-    return (
-      <div className="admin-asset-query-preview-audio">
-        <img
-          alt={`音频封面：${label}`}
-          className="admin-asset-query-preview-cover"
-          src={AUDIO_ASSET_COVER_SRC}
-        />
-        {mediaSrc ? (
-          <audio
-            aria-label={`音频预览：${label}`}
-            className="admin-asset-query-preview-player"
-            controls
-            preload="metadata"
-            src={mediaSrc}
-          />
-        ) : (
-          <div className="admin-asset-query-preview-placeholder" />
-        )}
-      </div>
-    );
-  }
-
-  if (isVideo) {
-    return mediaSrc ? (
-      <video
-        aria-label={`视频预览：${label}`}
-        className="admin-asset-query-preview-media"
-        controls
-        playsInline
-        poster={posterSrc || undefined}
-        preload="metadata"
-        src={mediaSrc}
-      />
-    ) : (
-      <div className="admin-asset-query-preview-placeholder" />
-    );
-  }
-
-  return mediaSrc ? (
-    <img
-      alt={`图片预览：${label}`}
-      className="admin-asset-query-preview-media"
-      src={mediaSrc}
-    />
-  ) : (
-    <div className="admin-asset-query-preview-placeholder" />
-  );
-}
-
 function AdminInfoItem({
   label,
   children,
@@ -921,167 +674,6 @@ function AdminInfoItem({
   );
 }
 
-function useAdminResolvedAssetUrl(
-  token: string,
-  imageSrc: string | null | undefined,
-  objectKey: string | null | undefined,
-  enabled = true,
-) {
-  const normalizedImageSrc = imageSrc?.trim() ?? '';
-  const normalizedObjectKey = normalizeAdminObjectKey(objectKey);
-  const normalizedLegacyPublicPath = isGeneratedLegacyPath(normalizedImageSrc)
-    ? normalizedImageSrc
-    : resolveAdminGeneratedLegacyPathFromUrl(normalizedImageSrc);
-  const shouldResolve =
-    Boolean(normalizedObjectKey) || Boolean(normalizedLegacyPublicPath);
-  const [resolvedImageSrc, setResolvedImageSrc] = useState(
-    shouldResolve ? '' : normalizedImageSrc,
-  );
-
-  useEffect(() => {
-    if (!normalizedImageSrc && !normalizedObjectKey) {
-      setResolvedImageSrc('');
-      return;
-    }
-    if (!shouldResolve) {
-      setResolvedImageSrc(normalizedImageSrc);
-      return;
-    }
-    if (!enabled) {
-      setResolvedImageSrc('');
-      return;
-    }
-
-    let cancelled = false;
-    let retryTimer: ReturnType<typeof setTimeout> | null = null;
-    let retryIndex = 0;
-    const dispatchController = new AbortController();
-    setResolvedImageSrc('');
-
-    const resolveReadUrl = async () => {
-      try {
-        await waitForAdminAssetReadDispatch(dispatchController.signal);
-        if (cancelled) {
-          return;
-        }
-        const response = await getAdminAssetReadUrl(
-          token,
-          normalizedObjectKey
-            ? {
-                objectKey: normalizedObjectKey,
-                expireSeconds: ADMIN_ASSET_READ_EXPIRE_SECONDS,
-              }
-            : {
-                legacyPublicPath: normalizedLegacyPublicPath,
-                expireSeconds: ADMIN_ASSET_READ_EXPIRE_SECONDS,
-              },
-        );
-        if (!cancelled) {
-          setResolvedImageSrc(resolveAdminAssetReadSignedUrl(response));
-        }
-      } catch (error: unknown) {
-        if (cancelled) {
-          return;
-        }
-        const retryDelay = ADMIN_ASSET_READ_RETRY_DELAYS_MS[retryIndex];
-        if (
-          isAdminApiError(error) &&
-          error.status === 429 &&
-          typeof retryDelay === 'number'
-        ) {
-          retryIndex += 1;
-          retryTimer = setTimeout(() => void resolveReadUrl(), retryDelay);
-          return;
-        }
-        setResolvedImageSrc('');
-      }
-    };
-
-    void resolveReadUrl();
-
-    return () => {
-      cancelled = true;
-      dispatchController.abort();
-      if (retryTimer !== null) {
-        clearTimeout(retryTimer);
-      }
-    };
-  }, [
-    enabled,
-    normalizedImageSrc,
-    normalizedLegacyPublicPath,
-    normalizedObjectKey,
-    shouldResolve,
-    token,
-  ]);
-
-  return resolvedImageSrc;
-}
-
-async function waitForAdminAssetReadDispatch(signal: AbortSignal) {
-  const dispatch = adminAssetReadDispatchTail.then(
-    () => waitForAdminAssetReadDispatchSpacing(signal),
-    () => waitForAdminAssetReadDispatchSpacing(signal),
-  );
-  adminAssetReadDispatchTail = dispatch.catch(() => undefined);
-  await dispatch;
-}
-
-async function waitForAdminAssetReadDispatchSpacing(signal: AbortSignal) {
-  if (signal.aborted) {
-    throw new DOMException('The operation was aborted.', 'AbortError');
-  }
-  await new Promise<void>((resolve, reject) => {
-    const timer = setTimeout(() => {
-      signal.removeEventListener('abort', handleAbort);
-      resolve();
-    }, ADMIN_ASSET_READ_DISPATCH_SPACING_MS);
-
-    function handleAbort() {
-      clearTimeout(timer);
-      reject(new DOMException('The operation was aborted.', 'AbortError'));
-    }
-
-    signal.addEventListener('abort', handleAbort, { once: true });
-  });
-}
-
-function normalizeAdminObjectKey(value: string | null | undefined) {
-  return value?.trim().replace(/^\/+/u, '') ?? '';
-}
-
-function adminAssetPathsMatch(left: string, right: string) {
-  return (
-    left.trim().replace(/^\/+|[?#].*$/gu, '') ===
-    right.trim().replace(/^\/+|[?#].*$/gu, '')
-  );
-}
-
-function isGeneratedLegacyPath(value: string) {
-  return /^\/?generated-[^/?#]+\/.+/u.test(value.trim());
-}
-
-function resolveAdminGeneratedLegacyPathFromUrl(value: string) {
-  try {
-    const parsedUrl = new URL(value);
-    if (
-      parsedUrl.protocol !== 'https:' ||
-      !/^[^.]+\.oss-[^.]+\.aliyuncs\.com$/iu.test(parsedUrl.hostname)
-    ) {
-      return '';
-    }
-    const legacyPublicPath = decodeURIComponent(parsedUrl.pathname);
-    return isGeneratedLegacyPath(legacyPublicPath) ? legacyPublicPath : '';
-  } catch {
-    return '';
-  }
-}
-
-function resolveAdminAssetReadSignedUrl(response: AdminAssetReadUrlResponse) {
-  const read = response.read ?? response;
-  return typeof read.signedUrl === 'string' ? read.signedUrl.trim() : '';
-}
-
 function mergeAssetEntries(
   current: AdminEditorAssetPayload[],
   incoming: AdminEditorAssetPayload[],
diff --git a/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.test.tsx b/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.test.tsx
index 9ad15e18b..f207ba285 100644
--- a/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.test.tsx
+++ b/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.test.tsx
@@ -1,13 +1,14 @@
 /* @vitest-environment jsdom */
 
 import {
+  act,
   fireEvent,
   render,
   screen,
   waitFor,
   within,
 } from '@testing-library/react';
-import { beforeEach, expect, test, vi } from 'vitest';
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 
 import {
   getAdminAssetReadUrl,
@@ -23,6 +24,13 @@ import { AdminEditorShowcaseReviewPage } from './AdminEditorShowcaseReviewPage';
 
 vi.mock('../api/adminApiClient', () => ({
   getAdminAssetReadUrl: vi.fn(),
+  isAdminApiError: vi.fn(
+    (error: unknown) =>
+      typeof error === 'object' &&
+      error !== null &&
+      'status' in error &&
+      typeof error.status === 'number',
+  ),
   getAdminEditorShowcaseCampaign: vi.fn(),
   listAdminEditorShowcaseAssets: vi.fn(),
   reviewAdminEditorShowcaseAsset: vi.fn(),
@@ -31,8 +39,87 @@ vi.mock('../api/adminApiClient', () => ({
   upsertAdminEditorShowcaseCampaign: vi.fn(),
 }));
 
+interface MockIntersectionObserverController {
+  enter: (target: Element) => void;
+  isObserved: (target: Element) => boolean;
+}
+
+function installIntersectionObserverMock(): MockIntersectionObserverController {
+  const observed = new Map<
+    Element,
+    {
+      callback: IntersectionObserverCallback;
+      observer: IntersectionObserver;
+    }
+  >();
+
+  class MockIntersectionObserver implements IntersectionObserver {
+    readonly root = null;
+    readonly rootMargin: string;
+    readonly thresholds = [0];
+    private readonly targets = new Set<Element>();
+
+    constructor(
+      private readonly callback: IntersectionObserverCallback,
+      options: IntersectionObserverInit = {},
+    ) {
+      this.rootMargin = options.rootMargin ?? '0px';
+    }
+
+    observe(target: Element) {
+      this.targets.add(target);
+      observed.set(target, {
+        callback: this.callback,
+        observer: this as unknown as IntersectionObserver,
+      });
+    }
+
+    unobserve(target: Element) {
+      this.targets.delete(target);
+      observed.delete(target);
+    }
+
+    disconnect() {
+      this.targets.forEach((target) => observed.delete(target));
+      this.targets.clear();
+    }
+
+    takeRecords() {
+      return [];
+    }
+  }
+
+  vi.stubGlobal('IntersectionObserver', MockIntersectionObserver);
+
+  return {
+    enter(target) {
+      const record = observed.get(target);
+      if (!record) {
+        throw new Error('目标精选缩略图尚未进入 IntersectionObserver');
+      }
+      act(() => {
+        record.callback(
+          [
+            {
+              isIntersecting: true,
+              target,
+            } as IntersectionObserverEntry,
+          ],
+          record.observer,
+        );
+      });
+    },
+    isObserved(target) {
+      return observed.has(target);
+    },
+  };
+}
+
 vi.mock('../components/AdminUserReferenceButton', () => ({
-  AdminUserReferenceButton: ({ userId, publicUserCode }: {
+  AdminUserReferenceButton: ({
+    userId,
+    publicUserCode,
+  }: {
     userId?: string;
     publicUserCode?: string | null;
   }) => (
@@ -160,6 +247,10 @@ beforeEach(() => {
   });
 });
 
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
 test('后台精选审核展示待审核素材和活动卡配置', async () => {
   render(
     <AdminEditorShowcaseReviewPage
@@ -184,10 +275,114 @@ test('后台精选审核展示待审核素材和活动卡配置', async () => {
     submittedBefore: null,
     limit: 80,
   });
+  await waitFor(() => {
+    expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', {
+      objectKey: 'generated-character-drafts/editor/spec.png',
+      expireSeconds: 300,
+    });
+  });
+});
+
+test('后台精选审核缩略图进入视口后换签并可打开图片预览', async () => {
+  const observer = installIntersectionObserverMock();
+  render(
+    <AdminEditorShowcaseReviewPage
+      token="admin-token"
+      onUnauthorized={vi.fn()}
+    />,
+  );
+
+  expect(await screen.findByText('角色形象 1')).toBeTruthy();
+  const previewButton = screen.getByTitle('预览素材');
+  const thumbnail = previewButton.querySelector('.admin-asset-query-thumb');
+  expect(thumbnail).not.toBeNull();
+  await waitFor(() => expect(observer.isObserved(thumbnail!)).toBe(true));
+  expect(getAdminAssetReadUrl).not.toHaveBeenCalled();
+
+  observer.enter(thumbnail!);
+  const image = await screen.findByRole('img', {
+    name: '精选素材：角色形象 1',
+  });
+  expect(image.getAttribute('src')).toBe('https://signed.example.com/spec.png');
+
+  fireEvent.click(previewButton);
+  const dialog = await screen.findByRole('dialog', { name: '素材预览' });
+  const previewImage = await within(dialog).findByRole('img', {
+    name: '图片预览：角色形象 1',
+  });
+  await waitFor(() => {
+    expect(previewImage.getAttribute('src')).toBe(
+      'https://signed.example.com/spec.png',
+    );
+  });
+  expect(screen.queryByRole('dialog', { name: '精选素材详情' })).toBeNull();
+});
+
+test('后台精选审核将无 objectKey 的绝对 OSS 图片地址换签后预览', async () => {
+  vi.mocked(listAdminEditorShowcaseAssets).mockResolvedValueOnce({
+    entries: [
+      {
+        ...pendingShowcaseAsset,
+        imageSrc:
+          'https://genarrative.oss-cn-shanghai.aliyuncs.com/generated-character-drafts/editor/absolute.png?x-oss-process=image/resize,w_320',
+        objectKey: null,
+      },
+    ],
+    nextCursor: null,
+  });
+  vi.mocked(getAdminAssetReadUrl).mockResolvedValue({
+    read: {
+      objectKey: 'generated-character-drafts/editor/absolute.png',
+      signedUrl: 'https://signed.example.com/absolute.png',
+      expiresAt: '2026-07-04T11:00:00Z',
+    },
+  });
+
+  render(
+    <AdminEditorShowcaseReviewPage
+      token="admin-token"
+      onUnauthorized={vi.fn()}
+    />,
+  );
+
+  const image = await screen.findByRole('img', {
+    name: '精选素材：角色形象 1',
+  });
+  expect(image.getAttribute('src')).toBe(
+    'https://signed.example.com/absolute.png',
+  );
   expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', {
-    objectKey: 'generated-character-drafts/editor/spec.png',
+    legacyPublicPath: '/generated-character-drafts/editor/absolute.png',
     expireSeconds: 300,
   });
+
+  fireEvent.click(screen.getByTitle('预览素材'));
+  const dialog = await screen.findByRole('dialog', { name: '素材预览' });
+  expect(
+    await within(dialog).findByRole('img', {
+      name: '图片预览：角色形象 1',
+    }),
+  ).toHaveProperty('src', 'https://signed.example.com/absolute.png');
+});
+
+test('后台精选审核详情中的缩略图也可打开素材预览', async () => {
+  render(
+    <AdminEditorShowcaseReviewPage
+      token="admin-token"
+      onUnauthorized={vi.fn()}
+    />,
+  );
+
+  fireEvent.click(await screen.findByRole('button', { name: '详情' }));
+  const detail = await screen.findByRole('dialog', { name: '精选素材详情' });
+  fireEvent.click(within(detail).getByTitle('预览素材'));
+
+  const preview = await screen.findByRole('dialog', { name: '素材预览' });
+  expect(
+    await within(preview).findByRole('img', {
+      name: '图片预览：角色形象 1',
+    }),
+  ).toBeTruthy();
 });
 
 test('后台精选审核格式化微秒时间并显示素材名', async () => {
diff --git a/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.tsx b/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.tsx
index dbcc6375c..fb90af61a 100644
--- a/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.tsx
+++ b/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.tsx
@@ -2,9 +2,7 @@ import { Eye, FileText, RefreshCcw, Upload, X } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
-import type { AdminAssetReadUrlResponse } from '../api/adminApiClient';
 import {
-  getAdminAssetReadUrl,
   getAdminEditorShowcaseCampaign,
   listAdminEditorShowcaseAssets,
   reviewAdminEditorShowcaseAsset,
@@ -17,6 +15,10 @@ import type {
   AdminEditorShowcaseCampaignPayload,
   AdminEditorShowcaseListQuery,
 } from '../api/adminApiTypes';
+import {
+  AdminEditorAssetPreviewDialog,
+  AdminEditorAssetThumbnail,
+} from '../components/AdminEditorAssetMedia';
 import { AdminUserReferenceButton } from '../components/AdminUserReferenceButton';
 import { handlePageError } from './pageUtils';
 
@@ -25,9 +27,6 @@ interface AdminEditorShowcaseReviewPageProps {
   onUnauthorized: (message?: string) => void;
 }
 
-const ADMIN_SHOWCASE_READ_EXPIRE_SECONDS = 300;
-const AUDIO_ASSET_COVER_SRC = `${import.meta.env.DEV ? import.meta.env.BASE_URL : '/'}creation-home/audio-asset-cover.png`;
-
 const showcaseCategoryOptions = [
   { value: 'characters', label: '角色' },
   { value: 'ui', label: 'UI' },
@@ -58,6 +57,8 @@ export function AdminEditorShowcaseReviewPage({
   const [reviewNotes, setReviewNotes] = useState<Record<string, string>>({});
   const [detailEntry, setDetailEntry] =
     useState<AdminEditorShowcaseAssetPayload | null>(null);
+  const [previewEntry, setPreviewEntry] =
+    useState<AdminEditorShowcaseAssetPayload | null>(null);
   const [promptPreview, setPromptPreview] = useState<{
     title: string;
     prompt: string;
@@ -342,11 +343,15 @@ export function AdminEditorShowcaseReviewPage({
                     <td>
                       <button
                         className="admin-asset-query-thumb-button"
-                        title="查看详情"
+                        title="预览素材"
                         type="button"
-                        onClick={() => setDetailEntry(entry)}
+                        onClick={() => setPreviewEntry(entry)}
                       >
-                        <AdminShowcaseThumbnail entry={entry} token={token} />
+                        <AdminEditorAssetThumbnail
+                          entry={entry}
+                          token={token}
+                          altPrefix="精选素材"
+                        />
                       </button>
                       <small>{entry.label || '-'}</small>
                     </td>
@@ -355,7 +360,9 @@ export function AdminEditorShowcaseReviewPage({
                       <div className="admin-inline-identity">
                         <div>
                           {authorDisplayName(entry)}
-                          <small>{entry.authorPublicUserCode?.trim() || '-'}</small>
+                          <small>
+                            {entry.authorPublicUserCode?.trim() || '-'}
+                          </small>
                         </div>
                         <AdminUserReferenceButton
                           token={token}
@@ -611,6 +618,7 @@ export function AdminEditorShowcaseReviewPage({
           token={token}
           onUnauthorized={onUnauthorized}
           onClose={() => setDetailEntry(null)}
+          onPreview={(entry) => setPreviewEntry(entry)}
           onPromptPreview={(entry, prompt) =>
             setPromptPreview({
               title: entry.label || entry.showcaseId,
@@ -620,6 +628,14 @@ export function AdminEditorShowcaseReviewPage({
         />
       ) : null}
 
+      {previewEntry ? (
+        <AdminEditorAssetPreviewDialog
+          entry={previewEntry}
+          token={token}
+          onClose={() => setPreviewEntry(null)}
+        />
+      ) : null}
+
       {promptPreview ? (
         <div className="admin-confirm-backdrop" role="presentation">
           <section
@@ -652,48 +668,18 @@ export function AdminEditorShowcaseReviewPage({
   );
 }
 
-function AdminShowcaseThumbnail({
-  entry,
-  token,
-}: {
-  entry: AdminEditorShowcaseAssetPayload;
-  token: string;
-}) {
-  const isAudio = isAdminShowcaseAudioAsset(entry);
-  const imageSrc = useAdminResolvedAssetImageSrc(
-    token,
-    isAudio ? AUDIO_ASSET_COVER_SRC : entry.imageSrc,
-    isAudio ? null : entry.objectKey,
-  );
-  const alt = `精选素材：${entry.label || entry.showcaseId}`;
-
-  return imageSrc ? (
-    <img alt={alt} className="admin-asset-query-thumb" src={imageSrc} />
-  ) : (
-    <div className="admin-asset-query-thumb admin-asset-query-thumb-placeholder" />
-  );
-}
-
-function isAdminShowcaseAudioAsset(entry: AdminEditorShowcaseAssetPayload) {
-  const assetKind = entry.assetKind?.trim() ?? '';
-  return (
-    assetKind === 'sound-effect' ||
-    assetKind === 'background-music' ||
-    assetKind === 'editor_uploaded_audio' ||
-    /\.(?:mp3|wav|m4a|aac|ogg)(?:$|[?#])/iu.test(entry.imageSrc.trim())
-  );
-}
-
 function AdminShowcaseDetailDialog({
   entry,
   token,
   onClose,
+  onPreview,
   onPromptPreview,
   onUnauthorized,
 }: {
   entry: AdminEditorShowcaseAssetPayload;
   token: string;
   onClose: () => void;
+  onPreview: (entry: AdminEditorShowcaseAssetPayload) => void;
   onUnauthorized: (message?: string) => void;
   onPromptPreview: (
     entry: AdminEditorShowcaseAssetPayload,
@@ -723,7 +709,18 @@ function AdminShowcaseDetailDialog({
           </button>
         </div>
         <div className="admin-asset-query-detail-layout">
-          <AdminShowcaseThumbnail entry={entry} token={token} />
+          <button
+            className="admin-asset-query-thumb-button admin-asset-query-detail-thumb-button"
+            title="预览素材"
+            type="button"
+            onClick={() => onPreview(entry)}
+          >
+            <AdminEditorAssetThumbnail
+              entry={entry}
+              token={token}
+              altPrefix="精选素材"
+            />
+          </button>
           <dl className="admin-info-list admin-detail-list">
             <AdminInfoItem label="作者">
               <div className="admin-inline-identity">
@@ -815,77 +812,6 @@ function AdminInfoItem({
   );
 }
 
-function useAdminResolvedAssetImageSrc(
-  token: string,
-  imageSrc: string | null | undefined,
-  objectKey: string | null | undefined,
-) {
-  const normalizedImageSrc = imageSrc?.trim() ?? '';
-  const normalizedObjectKey = normalizeAdminObjectKey(objectKey);
-  const shouldResolve =
-    Boolean(normalizedObjectKey) || isGeneratedLegacyPath(normalizedImageSrc);
-  const [resolvedImageSrc, setResolvedImageSrc] = useState(
-    shouldResolve ? '' : normalizedImageSrc,
-  );
-
-  useEffect(() => {
-    if (!normalizedImageSrc && !normalizedObjectKey) {
-      setResolvedImageSrc('');
-      return;
-    }
-    if (!shouldResolve) {
-      setResolvedImageSrc(normalizedImageSrc);
-      return;
-    }
-
-    let cancelled = false;
-    setResolvedImageSrc('');
-
-    void getAdminAssetReadUrl(
-      token,
-      normalizedObjectKey
-        ? {
-            objectKey: normalizedObjectKey,
-            expireSeconds: ADMIN_SHOWCASE_READ_EXPIRE_SECONDS,
-          }
-        : {
-            legacyPublicPath: normalizedImageSrc,
-            expireSeconds: ADMIN_SHOWCASE_READ_EXPIRE_SECONDS,
-          },
-    )
-      .then(resolveAdminAssetReadSignedUrl)
-      .then((signedUrl) => {
-        if (!cancelled) {
-          setResolvedImageSrc(signedUrl);
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setResolvedImageSrc('');
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [normalizedImageSrc, normalizedObjectKey, shouldResolve, token]);
-
-  return resolvedImageSrc;
-}
-
-function normalizeAdminObjectKey(value: string | null | undefined) {
-  return value?.trim().replace(/^\/+/u, '') ?? '';
-}
-
-function isGeneratedLegacyPath(value: string) {
-  return /^\/?generated-[^/?#]+\/.+/u.test(value.trim());
-}
-
-function resolveAdminAssetReadSignedUrl(response: AdminAssetReadUrlResponse) {
-  const read = response.read ?? response;
-  return typeof read.signedUrl === 'string' ? read.signedUrl.trim() : '';
-}
-
 function mergeShowcaseEntries(
   current: AdminEditorShowcaseAssetPayload[],
   incoming: AdminEditorShowcaseAssetPayload[],
diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index 21488cf3c..0c4dc32bb 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -95,13 +95,13 @@
 - 验证：API 测试覆盖陶泥号组合条件、未知陶泥号、可信来源归组、`seconds.microsZ` / 极值游标和真实 / 归组 Task ID；SpacetimeDB 测试覆盖资源删除后稳定归组、部分失败批次不抢占根任务、重复拆分有界无丢失和 owner 索引分支；后台页面测试覆盖逐字输入防抖、请求取消、刷新失败保留结果、筛选请求乱序、旧分页响应失效和“用户 ID / 陶泥号”请求。再运行 `cargo test -p api-server admin_editor_asset --manifest-path server-rs/Cargo.toml`、`cargo test -p spacetime-module admin_editor_asset --manifest-path server-rs/Cargo.toml` 和 `npm run test -- apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx`。
 - 关联：`apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx`、`server-rs/crates/api-server/src/admin.rs`、`server-rs/crates/spacetime-module/src/editor_project_storage.rs`。
 
-## 后台素材缩略图不要在首次挂载时全量换签
+## 后台素材查询与精选审核缩略图不要在首次挂载时全量换签
 
-- 现象：后台“素材查询”首批缩略图正常，继续向下滚动或读取更多后长期显示占位图；api-server journald 中已到达的 `/admin/api/assets/read-url` 可能全部是 `200`。
+- 现象：后台“素材查询”或“精选审核”首批缩略图正常，继续向下滚动、读取更多或一次加载较多审核项后长期显示占位图；api-server journald 中已到达的 `/admin/api/assets/read-url` 可能全部是 `200`。
 - 原因：列表一次挂载 80 条私有素材时，每个缩略图同时换签，会在同秒突发请求。production Nginx 的 `genarrative_admin_rps` 为 `30r/s burst=16`，超出部分在进入 api-server 前已返回 `429`，因此仅查 api-server 日志会漏掉失败请求。
-- 处理：缩略图使用 `IntersectionObserver` 在进入视口附近时再调用管理端换签；对 `429` 使用有上限的退避重试，并在条目卸载后停止更新状态和安排重试。不得为单页突发放大 Nginx 通用管理端限流，也不得在单次限流失败后永久保留无图占位。
-- 验证：前端定向测试覆盖首屏外的后续行进入可见区后才换签、“读取更多”追加行可继续显示缩略图、`429` 后有限重试恢复、卸载后不再重试；真实浏览器滚动验收时同时核对 Nginx access/error log、api-server journald 和 Network 面板，不以单一日志面判定成功。
-- 关联：`apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx`、`apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx`。
+- 处理：素材查询与精选审核共用缩略图和预览组件；缩略图使用 `IntersectionObserver` 在进入视口附近时再调用管理端换签；对 `429` 使用有上限的退避重试，并在条目卸载后停止更新状态和安排重试。无 `objectKey` 的绝对 OSS generated 地址先提取 legacy path 再换签。不得为单页突发放大 Nginx 通用管理端限流，也不得在单次限流失败后永久保留无图占位。
+- 验证：前端定向测试覆盖两页共用换签组件、首屏外的后续行进入可见区后才换签、“读取更多”追加行可继续显示缩略图、`429` 后有限重试恢复、卸载后不再重试、绝对 OSS 地址换签和点击缩略图打开媒体预览；真实浏览器滚动验收时同时核对 Nginx access/error log、api-server journald 和 Network 面板，不以单一日志面判定成功。
+- 关联：`apps/admin-web/src/components/AdminEditorAssetMedia.tsx`、`apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx`、`apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.tsx` 及对应测试。
 
 ## 陶泥儿精选重复先查同源同媒体画布副本
 
diff --git a/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md b/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md
index 2dd6144e1..53a328cc5 100644
--- a/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md
+++ b/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md
@@ -68,6 +68,7 @@ npm run check:server-rs-ddd
 - 现役 runtime 前缀公共能力：`GET /api/runtime/frontend-config`、鉴权的 `GET/PUT /api/runtime/settings` 以及鉴权的 `/api/runtime/external-generation/*`。这些分别承载非敏感前端开关、账号级公共设置和外部生成队列观测 / 确认，路径保留 `runtime` 前缀不代表旧玩法运行态恢复。`/api/runtime/frontend-config` 由 `api-server` 从运行时环境变量下发非敏感 UI 开关；画板右侧 Agent 入口由 `GENARRATIVE_ENABLE_IMAGE_EDITOR_AGENT_SIDEBAR` 控制，默认关闭。
 - 公共设置数据链：`GET/PUT /api/runtime/settings` 从 access token 取得 `user_id`，经 `spacetime-client` facade 调用 `get_runtime_setting_or_default` / `upsert_runtime_setting_and_return`，读写现役 `runtime_setting` 表的 `music_volume` 和 `platform_theme`。该表不是历史数据壳，也不得为保留它而恢复任何旧存档、游玩历史或玩法 settings 路由。
 - 后台素材查询：`GET /admin/api/editor-assets` 通过 `admin_list_editor_assets_and_return` 后台只读 procedure 读取私有账号级 `editor_asset` 中 `source_type = 'generated'` 的素材，支持 `ownerUserId`、`keyword`、`createdAfter`、`createdBefore`、`cursor` 和 `limit`；`ownerUserId` 接受内部用户 ID 或精确陶泥号，精确 `SY-*` keyword 也会在调用 procedure 前经认证服务解析成内部 `user_id`，未知陶泥号直接返回空列表。带 owner 条件时 procedure 直接走 `by_editor_asset_owner_user_id`，再按任务分组并以最终产物父项分页；响应中每个父项通过 `children` 携带可展开的中间产物，子项各占一行而不单独占分页名额。手动重拆图集保留真实 `editor-atlas-split-*` `task_id`；来源任务只能通过私有 provenance 由服务端生成账号素材的 source resource / asset object / Object Key 推导，再写入 `group_task_id`，不能信任素材库兼容推断值或普通资源创建接口可提交的 `task_id/asset_kind`；procedure 只有当前 editor generation runtime service identity 才能写入归组与完成事实。没有可信来源的现代拆分显式归到自身任务，不进入 legacy 回溯。每个切片同时写入 `group_task_expected_asset_count`，全部预期 asset ID 成功落库并逐行校验后写入不可逆 cohort 完成事实；read model 只让具有完成事实的一个拆分批次并入原图集父项，用户后来删除单片不会改变初始完成状态，部分失败批次与后续重复拆分按真实任务独立分页，避免残缺批次抢占根任务、单组无限增长或丢素材。历史行兼容沿项目资源链回溯，删除项目时只固化直接引用待删资源且尚未固化的历史行，持久化真实来源任务，不把有界展示 ID 反写覆盖来源。父项返回任务生成器和任务总成本，子项返回阶段生成器和阶段成本。provider 原图 / 角色动作预览承载模型生成成本，抠图、逐帧处理、透明图集和切片成本为 0；中间产物使用所属任务真实 `asset_kind`，不再新写 `editor_green_screen_source`，历史旧值只在 read model 中按 Object Key 映射为 `character`、`icon-spritesheet` 或 `character-animation` 并把旧任务成本只读归回 provider 原始产物。游标固定由父任务微秒时间和素材 ID 组成，API 必须同时识别整数微秒、`seconds.microsZ` 与 RFC3339 时间文本；内部时间无法编码时返回服务错误，不得静默返回 `nextCursor = null`。接口只用于查询，不提供分类筛选，也不执行精选审核、返还或展示状态修改，不通过后台 SQL 直查私有表。图片放大、视频和音频预览统一调用仅后台管理员会话可访问的 `GET /admin/api/assets/read-url`；该入口仅为预览允许后台跨 owner 签名，不改变主站 `/api/assets/read-*` 或 External API 的 owner 边界。成功换签后必须写入 `event_key = admin_asset_read_url` 的 `tracking_event`，记录管理员 subject、Object Key / legacy path 和有效期，不记录 signed URL。
+- 后台精选审核：`GET /admin/api/editor-showcase/assets` 的素材 payload 与素材查询共同返回稳定媒体引用，并透传底层精选快照已有的 `thumbnailSrc`，供视频封面或独立缩略图使用；两页前端共用同一缩略图、媒体类型、管理员换签和预览弹窗，不得在精选审核中复制一套立即全量换签或把绝对 OSS 私有地址直接交给浏览器的简化实现。
 现役路由只以 `app.rs::build_router` 实际 `.merge(...)` 的 module 和支付回调为准。`modules/` 中仍保留但未被 `app.rs` 声明 / 合并的 RPG、拼图、Match3D、敲木鱼、方洞、视觉小说、大鱼、跳一跳、汪汪声浪、儿童向、旧公开作品与 `play_flow` 源码都是历史追溯材料，不得由新的 `.merge(...)`、handler 转发或兼容 router 重新挂载。`/api/creation-entry/config`、`/admin/api/creation-entry/config*`、旧 `/api/creation/*`、旧 `/api/runtime/<play>/*`、旧存档 / 游玩历史 / 公开作品路由均不是现役 API。新增公共路由仍必须经 `app.rs` 的统一中间件、鉴权、背压、埋点与可观测边界。
 
 ### 图片画布 Agent 对话
diff --git a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
index f32c214aa..bcc053f41 100644
--- a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
+++ b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
@@ -122,6 +122,7 @@ Tab：
 - 上传素材、公开作品图片、mock 资源和假组合都不进入精选。
 - 任意画布左侧素材列表中，单个素材右键打开素材菜单；原外置删除按钮移入该菜单，以文字 `删除` 展示。生成素材菜单内提供 `提交精选审核`，调用 `POST /api/editor/assets/{assetId}/showcase-submissions` 后进入 `pending` 状态；已提交、已通过或已拒绝的素材显示对应状态，不再显示默认打开的公开勾选项。素材不可提交或后端拒绝提交时，菜单必须显示具体原因，例如非生成素材、素材尚未保存、没有媒体内容或审核未通过不能重复提交。
 - 后台新增纯素材查询页，读取账号级 `editor_asset` 中 `sourceType="generated"` 的素材，用于查看所有用户生成素材。该页只提供时间、用户 ID 和关键词查询，以及缩略图详情、提示词全文、生成成本、作者展示名和陶泥号查看；不提供分类筛选，也不承载审核、返还、展示开关或活动卡配置操作。
+- 后台“素材查询”和“精选审核”必须共用同一套素材缩略图、媒体类型判断、私有地址换签与放大预览弹窗：缩略图只在进入视口附近后错峰换签，遇到管理端限流时执行有上限的退避重试；点击缩略图直接打开图片、音频或视频预览，详情继续由独立“详情”按钮进入。无 `objectKey` 的历史绝对 OSS 地址也必须先归一为 generated legacy path 再换签，不能把私有裸地址直接交给浏览器。
 - 不为了填满展示区创建假素材、假作者、假泥点成本或假组合关系。
 - 暂无真实数据的 Tab 保留 Tab 入口，但内容区显示简洁空态。
 
diff --git a/server-rs/crates/api-server/src/admin.rs b/server-rs/crates/api-server/src/admin.rs
index 359834cb4..5c691b68a 100644
--- a/server-rs/crates/api-server/src/admin.rs
+++ b/server-rs/crates/api-server/src/admin.rs
@@ -1056,6 +1056,7 @@ fn admin_editor_showcase_asset_payload_from_record(
         task_id: record.task_id,
         asset_kind: record.asset_kind,
         generation_inputs: record.generation_inputs,
+        thumbnail_src: record.thumbnail_src,
         generation_cost_mud_points: record.generation_cost_mud_points,
         refund_mud_points: record.refund_mud_points,
         review_status: record.review_status,
@@ -4223,10 +4224,10 @@ mod tests {
             .ensure_orphan_work_owner_user("user-author-1", "author-1", "作者昵称", "SY-00000042")
             .expect("author should be inserted");
 
-        let payload = admin_editor_showcase_asset_payload_from_record(
-            &state,
-            test_admin_editor_showcase_asset_record("user-author-1"),
-        );
+        let mut record = test_admin_editor_showcase_asset_record("user-author-1");
+        record.thumbnail_src =
+            Some("/generated-character-drafts/editor/spec-thumb.png".to_string());
+        let payload = admin_editor_showcase_asset_payload_from_record(&state, record);
 
         assert_eq!(payload.owner_user_id, "user-author-1");
         assert_eq!(payload.author_display_name.as_deref(), Some("作者昵称"));
@@ -4234,6 +4235,10 @@ mod tests {
             payload.author_public_user_code.as_deref(),
             Some("SY-00000042")
         );
+        assert_eq!(
+            payload.thumbnail_src.as_deref(),
+            Some("/generated-character-drafts/editor/spec-thumb.png")
+        );
     }
 
     #[test]
diff --git a/server-rs/crates/shared-contracts/src/admin.rs b/server-rs/crates/shared-contracts/src/admin.rs
index 25e954e31..bbbd209e9 100644
--- a/server-rs/crates/shared-contracts/src/admin.rs
+++ b/server-rs/crates/shared-contracts/src/admin.rs
@@ -278,6 +278,7 @@ pub struct AdminEditorShowcaseAssetPayload {
     pub task_id: Option<String>,
     pub asset_kind: Option<String>,
     pub generation_inputs: Option<Value>,
+    pub thumbnail_src: Option<String>,
     pub generation_cost_mud_points: u64,
     pub refund_mud_points: u64,
     pub review_status: String,
@@ -1060,6 +1061,7 @@ mod tests {
             task_id: None,
             asset_kind: Some("character".to_string()),
             generation_inputs: None,
+            thumbnail_src: Some("/generated-character-drafts/editor/spec-thumb.png".to_string()),
             generation_cost_mud_points: 12,
             refund_mud_points: 6,
             review_status: "pending".to_string(),
@@ -1082,7 +1084,12 @@ mod tests {
 
         assert_eq!(value["authorDisplayName"], json!("作者昵称"));
         assert_eq!(value["authorPublicUserCode"], json!("SY-00000042"));
+        assert_eq!(
+            value["thumbnailSrc"],
+            json!("/generated-character-drafts/editor/spec-thumb.png")
+        );
         assert!(value.get("author_display_name").is_none());
         assert!(value.get("author_public_user_code").is_none());
+        assert!(value.get("thumbnail_src").is_none());
     }
 }