diff --git a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
index 857fb3680..547bd3249 100644
--- a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
+++ b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
@@ -83,7 +83,14 @@ Tab：
 - UI：每个列表项展示游戏 UI 图和该 UI 图拆出的子素材组合。
 - 音乐：展示背景音乐和音效。
 - 美宣：展示美宣类图片和视频素材。
-- 特效、场景、游戏：v1 只在有真实数据时展示，无数据时不造假卡片。
+- 特效、场景、游戏：v1 暂不实装生成链路，只在有真实数据时展示，无数据时不造假卡片，也不在 UI 中写“暂不实装”说明。
+
+交互口径：
+
+- 点击任一精选列表项后打开接近全屏的素材预览弹窗。
+- 弹窗中部展示当前素材，图片使用 contain 完整展示，视频和音频展示可播放控件。
+- 弹窗底部固定显示当前组合的缩略图导航，点击缩略图切换当前素材。
+- 弹窗底部同时展示该列表项的提示词、作者名和生成总成本。
 
 每个列表项需要标注：
 
diff --git a/src/components/ResolvedAssetImage.tsx b/src/components/ResolvedAssetImage.tsx
index 5f662f7b9..13060b386 100644
--- a/src/components/ResolvedAssetImage.tsx
+++ b/src/components/ResolvedAssetImage.tsx
@@ -8,12 +8,14 @@ type ResolvedAssetImageProps = Omit<
   'src'
 > & {
   src?: string | null;
+  objectKey?: string | null;
   fallbackSrc?: string | null;
   refreshKey?: string | number | null;
 };
 
 export function ResolvedAssetImage({
   src,
+  objectKey,
   fallbackSrc,
   alt,
   refreshKey,
@@ -21,6 +23,7 @@ export function ResolvedAssetImage({
   ...rest
 }: ResolvedAssetImageProps) {
   const { resolvedUrl, isResolving, shouldResolve } = useResolvedAssetReadUrl(src, {
+    objectKey,
     refreshKey,
   });
   const normalizedSource = src?.trim() ?? '';
diff --git a/src/components/ResolvedAssetVideo.tsx b/src/components/ResolvedAssetVideo.tsx
index 4f0a8b020..97658d03d 100644
--- a/src/components/ResolvedAssetVideo.tsx
+++ b/src/components/ResolvedAssetVideo.tsx
@@ -7,17 +7,20 @@ type ResolvedAssetVideoProps = Omit<
   'src'
 > & {
   src?: string | null;
+  objectKey?: string | null;
   fallbackSrc?: string | null;
   refreshKey?: string | number | null;
 };
 
 export function ResolvedAssetVideo({
   src,
+  objectKey,
   fallbackSrc,
   refreshKey,
   ...rest
 }: ResolvedAssetVideoProps) {
   const { resolvedUrl } = useResolvedAssetReadUrl(src, {
+    objectKey,
     refreshKey,
   });
   const finalSrc = resolvedUrl || fallbackSrc?.trim() || '';
diff --git a/src/components/creation-home/CreationLandingView.test.tsx b/src/components/creation-home/CreationLandingView.test.tsx
index 357decff8..ce026690d 100644
--- a/src/components/creation-home/CreationLandingView.test.tsx
+++ b/src/components/creation-home/CreationLandingView.test.tsx
@@ -258,6 +258,80 @@ describe('CreationLandingView', () => {
     expect(within(card as HTMLElement).getByText('20泥点')).toBeTruthy();
   });
 
+  it('opens a fullscreen asset preview modal with thumbnail navigation', async () => {
+    const user = userEvent.setup();
+    listEditorProjectsMock.mockResolvedValueOnce([]);
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [],
+      assets: [
+        {
+          assetId: 'asset-character',
+          folderId: 'folder-1',
+          label: '角色英雄',
+          imageSrc: 'data:image/png;base64,character',
+          width: 512,
+          height: 512,
+          sourceType: 'generated',
+          prompt: 'character hero prompt',
+          actualPrompt: null,
+          model: 'character-model',
+          provider: 'provider',
+          taskId: 'task-1',
+          assetKind: 'character',
+          authorName: '创作者A',
+          priceMudPoints: 20,
+        },
+        {
+          assetId: 'asset-animation',
+          folderId: 'folder-1',
+          label: '待机动画',
+          imageSrc: 'data:image/png;base64,animation',
+          width: 512,
+          height: 512,
+          sourceType: 'generated',
+          prompt: 'idle animation prompt',
+          actualPrompt: null,
+          model: 'seedance2.0-fast',
+          provider: 'ark',
+          taskId: 'task-2',
+          assetKind: 'character-animation',
+          priceMudPoints: 40,
+          generationInputs: {
+            fields: [{ title: '动作描述', value: '待机动作' }],
+            references: [
+              {
+                title: '角色图片',
+                label: '角色英雄',
+                refType: 'asset',
+                refId: 'asset-character',
+              },
+            ],
+          },
+        },
+      ],
+    });
+
+    renderCreationLanding();
+
+    await user.click(screen.getByRole('tab', { name: '角色' }));
+    await user.click(await screen.findByText('角色英雄'));
+
+    const dialog = await screen.findByRole('dialog', { name: '角色英雄' });
+    expect(within(dialog).getByText('生成总成本')).toBeTruthy();
+    expect(within(dialog).getByText('60泥点')).toBeTruthy();
+    expect(within(dialog).getByText('创作者A')).toBeTruthy();
+    expect(
+      within(dialog).getByLabelText('素材缩略图导航'),
+    ).toBeTruthy();
+
+    await user.click(within(dialog).getByRole('button', { name: '查看待机动画' }));
+    expect(
+      within(dialog).getByRole('button', { name: '查看待机动画' }).getAttribute(
+        'aria-current',
+      ),
+    ).toBe('true');
+  });
+
   it('uses Taonier featured as the account asset waterfall instead of creation entries', async () => {
     listEditorProjectsMock.mockResolvedValueOnce([]);
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
diff --git a/src/components/creation-home/CreationLandingView.tsx b/src/components/creation-home/CreationLandingView.tsx
index 6641d01f9..23c79b9f0 100644
--- a/src/components/creation-home/CreationLandingView.tsx
+++ b/src/components/creation-home/CreationLandingView.tsx
@@ -1,3 +1,4 @@
+import { Film, Image as ImageIcon, Music2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import {
@@ -5,23 +6,28 @@ import {
   listEditorProjects,
   loadEditorAssetLibrary,
   type EditorAssetLibrarySnapshot,
-  type EditorAssetSnapshot,
   type EditorProjectSnapshot,
 } from '../../services/image-editor/editorProjectClient';
 import { ApiClientError } from '../../services/apiClient';
+import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
 import { useAuthUi } from '../auth/AuthUiContext';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformEmptyState } from '../common/PlatformEmptyState';
 import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
+import { PlatformModalCloseButton } from '../common/PlatformModalCloseButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
+import { UnifiedModal } from '../common/UnifiedModal';
 import { ProjectCanvasCover } from '../project/ProjectCanvasCover';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
+import { ResolvedAssetVideo } from '../ResolvedAssetVideo';
+import type { PlatformPublicGalleryCard } from '../rpg-entry/rpgEntryWorldPresentation';
 import {
-  resolvePlatformWorkAuthorDisplayName,
-  resolvePlatformWorldCoverImage,
-  resolvePlatformWorldCoverSlides,
-  type PlatformPublicGalleryCard,
-} from '../rpg-entry/rpgEntryWorldPresentation';
+  buildCreationShowcaseItems,
+  SHOWCASE_TABS,
+  type ShowcaseAssetItem,
+  type ShowcaseAssetPreview,
+  type ShowcaseTabId,
+} from './creationShowcaseModel';
 
 type CreationLandingViewProps = {
   onOpenProject: (projectId: string) => void;
@@ -30,33 +36,12 @@ type CreationLandingViewProps = {
   publicGalleryEntries?: PlatformPublicGalleryCard[];
 };
 
-type ShowcaseTabId =
-  | 'packs'
-  | 'characters'
-  | 'ui'
-  | 'music'
-  | 'effects'
-  | 'scenes'
-  | 'marketing'
-  | 'games';
-
 type CreationFeatureItem = {
   title: string;
   description: string;
   iconSrc: string;
 };
 
-type ShowcaseAssetItem = {
-  id: string;
-  label: string;
-  imageSrc: string;
-  width?: number;
-  height?: number;
-  prompt: string;
-  author: string;
-  cost: string;
-};
-
 const CREATION_HOME_ASSETS = {
   heroCreate: '/creation-home/hero-create.png',
   heroCommunity: '/creation-home/hero-community.png',
@@ -111,17 +96,6 @@ const CREATION_FEATURES: CreationFeatureItem[] = [
   },
 ];
 
-const SHOWCASE_TABS: Array<{ id: ShowcaseTabId; label: string }> = [
-  { id: 'packs', label: '素材包' },
-  { id: 'characters', label: '角色' },
-  { id: 'ui', label: 'UI' },
-  { id: 'music', label: '音乐' },
-  { id: 'effects', label: '特效' },
-  { id: 'scenes', label: '场景' },
-  { id: 'marketing', label: '美宣' },
-  { id: 'games', label: '游戏' },
-];
-
 function isUnauthorizedError(error: unknown) {
   return error instanceof ApiClientError && error.status === 401;
 }
@@ -139,148 +113,247 @@ function formatProjectUpdatedAt(value: string) {
   }).format(date);
 }
 
-function formatAssetCost(asset: EditorAssetSnapshot) {
-  const value = (asset as Record<string, unknown>)['priceMudPoints'];
-  return typeof value === 'number' && Number.isFinite(value)
-    ? `${value}泥点`
-    : '-';
+function getPreviewAspectRatio(preview: ShowcaseAssetPreview) {
+  return preview.width && preview.height
+    ? `${Math.max(1, preview.width)} / ${Math.max(1, preview.height)}`
+    : undefined;
 }
 
-function resolveAssetAuthor(asset: EditorAssetSnapshot) {
-  const value = (asset as Record<string, unknown>)['authorName'];
-  return typeof value === 'string' && value.trim() ? value.trim() : '-';
+function getPreviewIcon(preview: ShowcaseAssetPreview) {
+  if (preview.mediaType === 'audio') {
+    return <Music2 aria-hidden="true" />;
+  }
+  if (preview.mediaType === 'video') {
+    return <Film aria-hidden="true" />;
+  }
+  return <ImageIcon aria-hidden="true" />;
 }
 
-function matchesShowcaseTab(asset: EditorAssetSnapshot, tab: ShowcaseTabId) {
-  const haystack = [
-    asset.label,
-    asset.prompt,
-    asset.actualPrompt,
-    asset.model,
-    asset.provider,
-    asset.sourceType,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .toLowerCase();
+function ShowcaseAudioPreview({
+  preview,
+  controls = false,
+}: {
+  preview: ShowcaseAssetPreview;
+  controls?: boolean;
+}) {
+  const { resolvedUrl } = useResolvedAssetReadUrl(preview.src, {
+    objectKey: preview.objectKey,
+  });
 
-  if (tab === 'packs') {
-    return true;
-  }
-  if (tab === 'characters') {
-    return /角色|character/u.test(haystack);
-  }
-  if (tab === 'ui') {
-    return /\bui\b|界面|图标|icon/u.test(haystack);
-  }
-  if (tab === 'music') {
-    return /音乐|音效|audio|music|sound/u.test(haystack);
-  }
-  if (tab === 'marketing') {
-    return /美宣|宣传|poster|video|视频/u.test(haystack);
-  }
-  if (tab === 'effects') {
-    return /特效|effect|vfx/u.test(haystack);
-  }
-  if (tab === 'scenes') {
-    return /场景|scene|background/u.test(haystack);
-  }
-  if (tab === 'games') {
-    return /游戏|game/u.test(haystack);
-  }
-  return false;
+  return (
+    <div className="creation-landing__asset-audio-preview">
+      <Music2 aria-hidden="true" />
+      {controls && resolvedUrl ? (
+        <audio controls preload="metadata" src={resolvedUrl} />
+      ) : null}
+    </div>
+  );
 }
 
-function toLibraryShowcaseItem(asset: EditorAssetSnapshot): ShowcaseAssetItem {
-  return {
-    id: `asset:${asset.assetId}`,
-    label: asset.label,
-    imageSrc: asset.imageSrc,
-    width: asset.width,
-    height: asset.height,
-    prompt: asset.prompt?.trim() || asset.actualPrompt?.trim() || '-',
-    author: resolveAssetAuthor(asset),
-    cost: formatAssetCost(asset),
-  };
+function ShowcasePreview({
+  preview,
+  variant = 'card',
+}: {
+  preview: ShowcaseAssetPreview;
+  variant?: 'card' | 'modal' | 'thumb';
+}) {
+  if (preview.mediaType === 'audio') {
+    return (
+      <ShowcaseAudioPreview preview={preview} controls={variant === 'modal'} />
+    );
+  }
+  if (preview.mediaType === 'video') {
+    return (
+      <ShowcaseVideoPreview
+        preview={preview}
+        controls={variant === 'modal'}
+        variant={variant}
+      />
+    );
+  }
+  return <ShowcaseImagePreview preview={preview} variant={variant} />;
 }
 
-function matchesPublicGalleryTab(
-  entry: PlatformPublicGalleryCard,
-  tab: ShowcaseTabId,
-) {
-  if (tab === 'packs' || tab === 'games') {
-    return true;
-  }
-
-  const themeTags = 'themeTags' in entry ? entry.themeTags : [];
-  const haystack = [
-    entry.worldName,
-    entry.subtitle,
-    entry.summaryText,
-    entry.sourceType,
-    ...themeTags,
-  ]
-    .join(' ')
-    .toLowerCase();
-
-  if (tab === 'characters') {
-    return /角色|character|rpg|visual/u.test(haystack);
-  }
-  if (tab === 'ui') {
-    return /\bui\b|界面|图标|icon|puzzle/u.test(haystack);
-  }
-  if (tab === 'music') {
-    return /音乐|音效|audio|music|sound/u.test(haystack);
-  }
-  if (tab === 'marketing') {
-    return /美宣|宣传|poster|video|视觉|visual/u.test(haystack);
-  }
-  if (tab === 'effects') {
-    return /特效|effect|vfx/u.test(haystack);
-  }
-  if (tab === 'scenes') {
-    return /场景|scene|background|world|rpg/u.test(haystack);
-  }
-  return false;
+function ShowcaseImagePreview({
+  preview,
+  variant,
+}: {
+  preview: ShowcaseAssetPreview;
+  variant: 'card' | 'modal' | 'thumb';
+}) {
+  return (
+    <ResolvedAssetImage
+      src={preview.src}
+      objectKey={preview.objectKey}
+      alt={preview.label}
+      className={
+        variant === 'modal'
+          ? 'creation-landing__showcase-media'
+          : 'h-full w-full object-contain'
+      }
+    />
+  );
 }
 
-function toPublicGalleryShowcaseItems(
-  entries: PlatformPublicGalleryCard[],
-  tab: ShowcaseTabId,
-): ShowcaseAssetItem[] {
-  const usedImageSrcs = new Set<string>();
-  const items: ShowcaseAssetItem[] = [];
+function ShowcaseVideoPreview({
+  preview,
+  controls,
+  variant,
+}: {
+  preview: ShowcaseAssetPreview;
+  controls: boolean;
+  variant: 'card' | 'modal' | 'thumb';
+}) {
+  return (
+    <ResolvedAssetVideo
+      src={preview.src}
+      objectKey={preview.objectKey}
+      className={
+        variant === 'modal'
+          ? 'creation-landing__showcase-media'
+          : 'h-full w-full object-contain'
+      }
+      controls={controls}
+      muted={!controls}
+      loop={!controls}
+      playsInline
+    />
+  );
+}
 
-  entries
-    .filter((entry) => matchesPublicGalleryTab(entry, tab))
-    .forEach((entry) => {
-      const coverImageSrc = resolvePlatformWorldCoverImage(entry).trim();
-      const imageCandidates = [
-        ...resolvePlatformWorldCoverSlides(entry).map((slide) =>
-          slide.imageSrc.trim(),
-        ),
-        coverImageSrc,
-      ].filter(Boolean);
+function ShowcaseBundlePreview({
+  item,
+}: {
+  item: ShowcaseAssetItem;
+}) {
+  const visiblePreviews = item.previews.slice(0, 4);
+  const primaryPreview = visiblePreviews[0];
 
-      imageCandidates.forEach((imageSrc, index) => {
-        if (usedImageSrcs.has(imageSrc)) {
-          return;
-        }
-        usedImageSrcs.add(imageSrc);
-        items.push({
-          id: `public:${entry.sourceType}:${entry.profileId}:${index}`,
-          label: index === 0 ? entry.worldName : `${entry.worldName} ${index + 1}`,
-          imageSrc,
-          width: index === 0 ? 720 : 640,
-          height: index === 0 ? 480 : 720,
-          prompt: entry.summaryText || entry.subtitle || '-',
-          author: resolvePlatformWorkAuthorDisplayName(entry),
-          cost: '-',
-        });
-      });
-    });
+  if (!primaryPreview) {
+    return null;
+  }
 
-  return items.slice(0, 36);
+  return (
+    <div
+      className={
+        item.previews.length > 1
+          ? 'creation-landing__asset-preview creation-landing__asset-preview--bundle'
+          : 'creation-landing__asset-preview'
+      }
+      style={{
+        aspectRatio: getPreviewAspectRatio(primaryPreview),
+      }}
+    >
+      {visiblePreviews.map((preview) => (
+        <span
+          key={preview.id}
+          className="creation-landing__asset-preview-tile"
+          aria-label={preview.label}
+        >
+          <ShowcasePreview preview={preview} />
+        </span>
+      ))}
+      {item.previews.length > visiblePreviews.length ? (
+        <span className="creation-landing__asset-preview-more">
+          +{item.previews.length - visiblePreviews.length}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function CreationShowcaseModal({
+  item,
+  activeIndex,
+  onSelectIndex,
+  onClose,
+}: {
+  item: ShowcaseAssetItem | null;
+  activeIndex: number;
+  onSelectIndex: (index: number) => void;
+  onClose: () => void;
+}) {
+  const safeActiveIndex = item
+    ? Math.min(Math.max(activeIndex, 0), item.previews.length - 1)
+    : 0;
+  const activePreview = item?.previews[safeActiveIndex] ?? null;
+
+  return (
+    <UnifiedModal
+      open={Boolean(item && activePreview)}
+      title={item?.label ?? '素材预览'}
+      ariaLabel={item?.label ?? '素材预览'}
+      onClose={onClose}
+      showHeader={false}
+      showCloseButton={false}
+      size="fullscreen"
+      zIndexClassName="z-[120]"
+      overlayClassName="creation-landing__showcase-modal-overlay"
+      panelClassName="creation-landing__showcase-modal-panel"
+      bodyClassName="creation-landing__showcase-modal-body"
+      closeOnBackdrop
+    >
+      {item && activePreview ? (
+        <div className="creation-landing__showcase-modal">
+          <PlatformModalCloseButton
+            label="关闭素材预览"
+            variant="floating"
+            className="creation-landing__showcase-modal-close"
+            onClick={onClose}
+          />
+          <div className="creation-landing__showcase-modal-stage">
+            <div className="creation-landing__showcase-current">
+              <ShowcasePreview preview={activePreview} variant="modal" />
+            </div>
+          </div>
+          <div className="creation-landing__showcase-dock">
+            <div className="creation-landing__showcase-dock-meta">
+              <h3>{item.label}</h3>
+              <p>{item.prompt}</p>
+              <dl>
+                <div>
+                  <dt>作者</dt>
+                  <dd>{item.author}</dd>
+                </div>
+                <div>
+                  <dt>生成总成本</dt>
+                  <dd>{item.cost}</dd>
+                </div>
+              </dl>
+            </div>
+            <div
+              className="creation-landing__showcase-thumbs"
+              aria-label="素材缩略图导航"
+            >
+              {item.previews.map((preview, index) => (
+                <button
+                  key={preview.id}
+                  type="button"
+                  className={
+                    index === safeActiveIndex
+                      ? 'creation-landing__showcase-thumb creation-landing__showcase-thumb--active'
+                      : 'creation-landing__showcase-thumb'
+                  }
+                  aria-label={`查看${preview.label}`}
+                  aria-current={index === safeActiveIndex ? 'true' : undefined}
+                  onClick={() => onSelectIndex(index)}
+                >
+                  <span className="creation-landing__showcase-thumb-media">
+                    {preview.mediaType === 'image' ? (
+                      <ShowcasePreview preview={preview} variant="thumb" />
+                    ) : (
+                      getPreviewIcon(preview)
+                    )}
+                  </span>
+                  <span>{preview.label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </UnifiedModal>
+  );
 }
 
 export function CreationLandingView({
@@ -303,6 +376,9 @@ export function CreationLandingView({
   const [assetError, setAssetError] = useState<string | null>(null);
   const [activeShowcaseTab, setActiveShowcaseTab] =
     useState<ShowcaseTabId>('packs');
+  const [selectedShowcaseItem, setSelectedShowcaseItem] =
+    useState<ShowcaseAssetItem | null>(null);
+  const [selectedShowcaseIndex, setSelectedShowcaseIndex] = useState(0);
 
   const refreshRecentProjects = useCallback(() => {
     if (!isAuthenticated) {
@@ -386,15 +462,16 @@ export function CreationLandingView({
       .finally(() => setIsCreatingProject(false));
   }, [authUi, onOpenProject]);
 
-  const showcaseItems = useMemo(() => {
-    const libraryItems = (assetLibrary?.assets ?? [])
-      .filter((asset) => matchesShowcaseTab(asset, activeShowcaseTab))
-      .map(toLibraryShowcaseItem);
-    if (libraryItems.length > 0) {
-      return libraryItems.slice(0, 36);
-    }
-    return toPublicGalleryShowcaseItems(publicGalleryEntries, activeShowcaseTab);
-  }, [activeShowcaseTab, assetLibrary, publicGalleryEntries]);
+  const showcaseItems = useMemo(
+    () =>
+      buildCreationShowcaseItems({
+        activeTab: activeShowcaseTab,
+        assetLibrary,
+        publicGalleryEntries,
+        fallbackAuthorName: authUi?.user?.displayName,
+      }),
+    [activeShowcaseTab, assetLibrary, authUi?.user?.displayName, publicGalleryEntries],
+  );
 
   const isShowcaseLoading = isAuthenticated && isLoadingAssets;
   const showcaseEmptyText =
@@ -426,22 +503,16 @@ export function CreationLandingView({
     return (
       <div className="creation-landing__asset-waterfall" aria-label="用户素材瀑布流">
         {showcaseItems.map((item) => (
-          <article key={item.id} className="creation-landing__asset-card">
-            <div
-              className="creation-landing__asset-preview"
-              style={{
-                aspectRatio:
-                  item.width && item.height
-                    ? `${Math.max(1, item.width)} / ${Math.max(1, item.height)}`
-                    : undefined,
-              }}
-            >
-              <ResolvedAssetImage
-                src={item.imageSrc}
-                alt={item.label}
-                className="h-full w-full object-contain"
-              />
-            </div>
+          <button
+            key={item.id}
+            type="button"
+            className="creation-landing__asset-card"
+            onClick={() => {
+              setSelectedShowcaseItem(item);
+              setSelectedShowcaseIndex(0);
+            }}
+          >
+            <ShowcaseBundlePreview item={item} />
             <div className="creation-landing__asset-meta">
               <h3>{item.label}</h3>
               <p>{item.prompt}</p>
@@ -451,12 +522,12 @@ export function CreationLandingView({
                   <dd>{item.author}</dd>
                 </div>
                 <div>
-                  <dt>成本</dt>
+                  <dt>生成总成本</dt>
                   <dd>{item.cost}</dd>
                 </div>
               </dl>
             </div>
-          </article>
+          </button>
         ))}
       </div>
     );
@@ -638,6 +709,12 @@ export function CreationLandingView({
         </div>
         {renderAssetShowcase()}
       </section>
+      <CreationShowcaseModal
+        item={selectedShowcaseItem}
+        activeIndex={selectedShowcaseIndex}
+        onSelectIndex={setSelectedShowcaseIndex}
+        onClose={() => setSelectedShowcaseItem(null)}
+      />
     </main>
   );
 }
diff --git a/src/components/creation-home/creationShowcaseModel.test.ts b/src/components/creation-home/creationShowcaseModel.test.ts
new file mode 100644
index 000000000..90ffd8089
--- /dev/null
+++ b/src/components/creation-home/creationShowcaseModel.test.ts
@@ -0,0 +1,358 @@
+import { describe, expect, it } from 'vitest';
+
+import type {
+  EditorAssetLibrarySnapshot,
+  EditorAssetSnapshot,
+} from '../../services/image-editor/editorProjectClient';
+import { buildCreationShowcaseItems } from './creationShowcaseModel';
+
+function createAsset(
+  overrides: Partial<EditorAssetSnapshot> & Record<string, unknown>,
+): EditorAssetSnapshot {
+  return {
+    assetId: 'asset-1',
+    folderId: 'folder-1',
+    label: '素材',
+    imageSrc: 'data:image/png;base64,asset',
+    width: 512,
+    height: 512,
+    sourceType: 'generated',
+    prompt: null,
+    actualPrompt: null,
+    model: null,
+    provider: null,
+    taskId: null,
+    ...overrides,
+  };
+}
+
+function createLibrary(assets: EditorAssetSnapshot[]): EditorAssetLibrarySnapshot {
+  return {
+    folders: [],
+    assets,
+  };
+}
+
+describe('creationShowcaseModel', () => {
+  it('groups pack items by the same referenced spec image and sums known cost', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'packs',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'spec-1',
+          label: '角色规范图',
+          assetKind: 'spec',
+          prompt: '规范提示词',
+          priceMudPoints: 5,
+          authorName: '创作者A',
+        }),
+        createAsset({
+          assetId: 'character-1',
+          label: '角色主图',
+          assetKind: 'character',
+          priceMudPoints: 12,
+          generationInputs: {
+            fields: [{ title: '角色设定', value: '角色提示词' }],
+            references: [
+              {
+                title: '角色规范',
+                label: '角色规范图',
+                refType: 'asset',
+                refId: 'spec-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.label).toBe('角色规范图');
+    expect(items[0]?.previews.map((preview) => preview.label)).toEqual([
+      '角色规范图',
+      '角色主图',
+    ]);
+    expect(items[0]?.prompt).toBe('规范提示词');
+    expect(items[0]?.author).toBe('创作者A');
+    expect(items[0]?.cost).toBe('17泥点');
+  });
+
+  it('groups assets when references point to the source project resource', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'packs',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'spec-1',
+          label: '项目规范图',
+          assetKind: 'spec',
+          sourceResourceId: 'resource-spec-1',
+        }),
+        createAsset({
+          assetId: 'character-1',
+          label: '项目角色图',
+          assetKind: 'character',
+          generationInputs: {
+            fields: [{ title: '角色设定', value: '项目角色提示词' }],
+            references: [
+              {
+                title: '角色规范',
+                label: '项目规范图',
+                refType: 'project-resource',
+                refId: 'resource-spec-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.previews.map((preview) => preview.label)).toEqual([
+      '项目规范图',
+      '项目角色图',
+    ]);
+  });
+
+  it('groups character animations under the referenced character image', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'characters',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'character-1',
+          label: '游戏角色图',
+          assetKind: 'character',
+          prompt: '角色提示词',
+        }),
+        createAsset({
+          assetId: 'animation-1',
+          label: '待机动画',
+          assetKind: 'character-animation',
+          imageSrc: 'data:image/png;base64,animation',
+          generationInputs: {
+            fields: [{ title: '动作描述', value: '待机动作' }],
+            references: [
+              {
+                title: '角色图片',
+                label: '游戏角色图',
+                refType: 'asset',
+                refId: 'character-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.label).toBe('游戏角色图');
+    expect(items[0]?.previews.map((preview) => preview.label)).toEqual([
+      '游戏角色图',
+      '待机动画',
+    ]);
+  });
+
+  it('groups UI design extraction assets under the referenced UI image', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'ui',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'ui-design-1',
+          label: '游戏UI图',
+          assetKind: 'ui-design',
+          prompt: 'UI提示词',
+        }),
+        createAsset({
+          assetId: 'icon-sheet-1',
+          label: 'UI子素材图集',
+          assetKind: 'icon-spritesheet',
+          generationInputs: {
+            fields: [{ title: '提取提示词', value: '提取UI子素材' }],
+            references: [
+              {
+                title: 'UI设计图',
+                label: '游戏UI图',
+                refType: 'asset',
+                refId: 'ui-design-1',
+              },
+            ],
+          },
+        }),
+        createAsset({
+          assetId: 'icon-1',
+          label: '开始按钮',
+          assetKind: 'icon',
+          generationInputs: {
+            fields: [{ title: '提取提示词', value: '提取UI子素材' }],
+            references: [
+              {
+                title: 'UI设计图',
+                label: '游戏UI图',
+                refType: 'asset',
+                refId: 'ui-design-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.label).toBe('游戏UI图');
+    expect(items[0]?.previews.map((preview) => preview.label)).toEqual([
+      '游戏UI图',
+      'UI子素材图集',
+      '开始按钮',
+    ]);
+  });
+
+  it('counts a spritesheet task only once when UI children share the same task', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'ui',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'ui-design-1',
+          label: '游戏UI图',
+          assetKind: 'ui-design',
+          model: 'gemini-3.1-flash-image-preview',
+          taskId: 'task-ui-design',
+        }),
+        createAsset({
+          assetId: 'icon-sheet-1',
+          label: 'UI子素材图集',
+          assetKind: 'icon-spritesheet',
+          model: 'gpt-image-2',
+          taskId: 'task-ui-extract',
+          generationInputs: {
+            fields: [{ title: '提取提示词', value: '提取UI子素材' }],
+            references: [
+              {
+                title: 'UI设计图',
+                label: '游戏UI图',
+                refType: 'asset',
+                refId: 'ui-design-1',
+              },
+            ],
+          },
+        }),
+        createAsset({
+          assetId: 'icon-1',
+          label: '开始按钮',
+          assetKind: 'icon',
+          model: 'gpt-image-2',
+          taskId: 'task-ui-extract',
+          generationInputs: {
+            fields: [{ title: '提取提示词', value: '提取UI子素材' }],
+            references: [
+              {
+                title: 'UI设计图',
+                label: '游戏UI图',
+                refType: 'asset',
+                refId: 'ui-design-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.cost).toBe('32泥点');
+  });
+
+  it('keeps music assets as audio preview items', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'music',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'music-1',
+          label: '背景音乐',
+          imageSrc: '/generated-editor-audios/music.mp3',
+          assetKind: 'background-music',
+          prompt: '舒缓背景音乐',
+          priceMudPoints: '5',
+        }),
+      ]),
+      publicGalleryEntries: [],
+      fallbackAuthorName: '当前用户',
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.previews[0]?.mediaType).toBe('audio');
+    expect(items[0]?.author).toBe('当前用户');
+    expect(items[0]?.cost).toBe('5泥点');
+  });
+
+  it('keeps character animation videos out of the marketing tab', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'marketing',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'animation-1',
+          label: '角色动画',
+          assetKind: 'character-animation',
+          imageSrc: '/generated-editor-videos/animation.mp4',
+        }),
+        createAsset({
+          assetId: 'poster-1',
+          label: '上线美宣视频',
+          assetKind: 'publication-material',
+          imageSrc: '/generated-editor-videos/poster.mp4',
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.label).toBe('上线美宣视频');
+    expect(items[0]?.previews[0]?.mediaType).toBe('video');
+  });
+
+  it('infers costs from generated asset kinds when stored price is absent', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'characters',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'character-1',
+          label: '游戏角色图',
+          imageSrc: '/generated-editor-assets/character.png',
+          objectKey: 'generated-editor-assets/character.png',
+          assetKind: 'character',
+          model: 'gpt-image-2',
+          prompt: '角色提示词',
+        }),
+        createAsset({
+          assetId: 'animation-1',
+          label: '待机动画',
+          assetKind: 'character-animation',
+          imageSrc: '/generated-editor-videos/animation.mp4',
+          objectKey: 'generated-editor-videos/animation.mp4',
+          model: 'seedance2.0-fast',
+          durationSeconds: 6,
+          generationInputs: {
+            fields: [{ title: '清晰度', value: '720p' }],
+            references: [
+              {
+                title: '角色图片',
+                label: '游戏角色图',
+                refType: 'asset',
+                refId: 'character-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.cost).toBe('140泥点');
+    expect(items[0]?.previews[0]?.objectKey).toBe(
+      'generated-editor-assets/character.png',
+    );
+  });
+});
diff --git a/src/components/creation-home/creationShowcaseModel.ts b/src/components/creation-home/creationShowcaseModel.ts
new file mode 100644
index 000000000..2e6f299c9
--- /dev/null
+++ b/src/components/creation-home/creationShowcaseModel.ts
@@ -0,0 +1,754 @@
+import type {
+  EditorAssetGenerationInputReference,
+  EditorAssetLibrarySnapshot,
+  EditorAssetSnapshot,
+} from '../../services/image-editor/editorProjectClient';
+import {
+  calculateCharacterAnimationPrice,
+  calculateEditorBackgroundMusicPrice,
+  calculateEditorImageGenerationPrice,
+  calculateEditorSoundEffectPrice,
+  calculateEditorVideoPrice,
+  CHARACTER_ANIMATION_MODEL,
+  DEFAULT_BACKGROUND_MUSIC_MODEL,
+  DEFAULT_SOUND_EFFECT_MODEL,
+  DEFAULT_VIDEO_DURATION_SECONDS,
+  DEFAULT_VIDEO_MODEL,
+} from '../image-editor/ImageCanvasGenerationModel';
+import {
+  resolvePlatformWorkAuthorDisplayName,
+  resolvePlatformWorldCoverImage,
+  resolvePlatformWorldCoverSlides,
+  type PlatformPublicGalleryCard,
+} from '../rpg-entry/rpgEntryWorldPresentation';
+
+export type ShowcaseTabId =
+  | 'packs'
+  | 'characters'
+  | 'ui'
+  | 'music'
+  | 'effects'
+  | 'scenes'
+  | 'marketing'
+  | 'games';
+
+export type ShowcaseAssetMediaType = 'image' | 'video' | 'audio';
+
+export type ShowcaseAssetPreview = {
+  id: string;
+  label: string;
+  src: string;
+  objectKey?: string | null;
+  mediaType: ShowcaseAssetMediaType;
+  width?: number;
+  height?: number;
+};
+
+export type ShowcaseAssetItem = {
+  id: string;
+  label: string;
+  previews: ShowcaseAssetPreview[];
+  prompt: string;
+  author: string;
+  cost: string;
+};
+
+type ShowcaseAssetGroup = {
+  id: string;
+  label?: string;
+  assets: EditorAssetSnapshot[];
+};
+
+const UNKNOWN_META_VALUE = '-';
+
+const SHOWCASE_COST_KEYS = [
+  'priceMudPoints',
+  'costMudPoints',
+  'generationCostMudPoints',
+  'mudPointCost',
+] as const;
+
+const SHOWCASE_AUTHOR_KEYS = [
+  'authorName',
+  'creatorName',
+  'ownerLabel',
+  'ownerName',
+  'authorDisplayName',
+] as const;
+
+export const SHOWCASE_TABS: Array<{ id: ShowcaseTabId; label: string }> = [
+  { id: 'packs', label: '素材包' },
+  { id: 'characters', label: '角色' },
+  { id: 'ui', label: 'UI' },
+  { id: 'music', label: '音乐' },
+  { id: 'effects', label: '特效' },
+  { id: 'scenes', label: '场景' },
+  { id: 'marketing', label: '美宣' },
+  { id: 'games', label: '游戏' },
+];
+
+function assetRecord(asset: EditorAssetSnapshot) {
+  return asset as Record<string, unknown>;
+}
+
+function normalizeText(value: unknown) {
+  return typeof value === 'string' && value.trim() ? value.trim() : '';
+}
+
+function normalizeNumber(value: unknown) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string' && value.trim()) {
+    const numericValue = Number(value.trim());
+    return Number.isFinite(numericValue) ? numericValue : null;
+  }
+  return null;
+}
+
+function normalizeInt(
+  value: unknown,
+  fallback: number,
+  minValue = 1,
+  maxValue = Number.MAX_SAFE_INTEGER,
+) {
+  const numericValue = normalizeNumber(value);
+  if (numericValue === null) {
+    return fallback;
+  }
+  return Math.min(maxValue, Math.max(minValue, Math.round(numericValue)));
+}
+
+function normalizeAssetKind(asset: EditorAssetSnapshot) {
+  return asset.assetKind?.trim() ?? '';
+}
+
+function getAssetHaystack(asset: EditorAssetSnapshot) {
+  return [
+    asset.label,
+    asset.prompt,
+    asset.actualPrompt,
+    asset.model,
+    asset.provider,
+    asset.sourceType,
+    asset.assetKind,
+    ...(asset.generationInputs?.fields ?? []).flatMap((field) => [
+      field.title,
+      field.value,
+    ]),
+    ...(asset.generationInputs?.references ?? []).flatMap((reference) => [
+      reference.title,
+      reference.label,
+      reference.refType,
+      reference.refId,
+    ]),
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .toLowerCase();
+}
+
+function getAssetReferences(asset: EditorAssetSnapshot) {
+  return asset.generationInputs?.references ?? [];
+}
+
+function getReferenceKey(reference: EditorAssetGenerationInputReference) {
+  return `${reference.refType}:${reference.refId}`;
+}
+
+function getSelfAssetKey(asset: EditorAssetSnapshot) {
+  return `asset:${asset.assetId}`;
+}
+
+function getAssetReferenceKeys(asset: EditorAssetSnapshot) {
+  const keys = [getSelfAssetKey(asset)];
+  if (asset.sourceResourceId?.trim()) {
+    keys.push(`project-resource:${asset.sourceResourceId.trim()}`);
+  }
+  if (asset.assetObjectId?.trim()) {
+    keys.push(`asset-object:${asset.assetObjectId.trim()}`);
+  }
+  if (asset.objectKey?.trim()) {
+    keys.push(`object:${asset.objectKey.trim()}`);
+  }
+  return keys;
+}
+
+function findReference(
+  asset: EditorAssetSnapshot,
+  matcher: (reference: EditorAssetGenerationInputReference) => boolean,
+) {
+  return getAssetReferences(asset).find(matcher) ?? null;
+}
+
+function findSpecReference(asset: EditorAssetSnapshot) {
+  return findReference(asset, (reference) => /规范/u.test(reference.title));
+}
+
+function findCharacterReference(asset: EditorAssetSnapshot) {
+  return findReference(asset, (reference) => /角色图片|角色图/u.test(reference.title));
+}
+
+function findUiDesignReference(asset: EditorAssetSnapshot) {
+  return findReference(asset, (reference) => /UI设计图|UI 图|UI图片/u.test(reference.title));
+}
+
+function isAssetKind(asset: EditorAssetSnapshot, kinds: readonly string[]) {
+  return kinds.includes(normalizeAssetKind(asset));
+}
+
+function isAudioAsset(asset: EditorAssetSnapshot) {
+  const mediaType = normalizeText(assetRecord(asset).mediaType);
+  return (
+    mediaType === 'audio' ||
+    isAssetKind(asset, ['sound-effect', 'background-music']) ||
+    /\.(mp3|wav|m4a|aac|ogg)(?:$|\?)/iu.test(asset.imageSrc)
+  );
+}
+
+function isVideoAsset(asset: EditorAssetSnapshot) {
+  const mediaType = normalizeText(assetRecord(asset).mediaType);
+  return (
+    mediaType === 'video' ||
+    isAssetKind(asset, ['video']) ||
+    /\.(mp4|webm|mov|m4v)(?:$|\?)/iu.test(asset.imageSrc)
+  );
+}
+
+function resolveAssetMediaType(asset: EditorAssetSnapshot): ShowcaseAssetMediaType {
+  if (isAudioAsset(asset)) {
+    return 'audio';
+  }
+  if (isVideoAsset(asset)) {
+    return 'video';
+  }
+  return 'image';
+}
+
+function isSpecAsset(asset: EditorAssetSnapshot) {
+  return isAssetKind(asset, ['spec', 'icon-spec']);
+}
+
+function isCharacterAsset(asset: EditorAssetSnapshot) {
+  return isAssetKind(asset, ['character']);
+}
+
+function isCharacterAnimationAsset(asset: EditorAssetSnapshot) {
+  return isAssetKind(asset, ['character-animation']);
+}
+
+function isUiAsset(asset: EditorAssetSnapshot) {
+  return isAssetKind(asset, ['ui-design', 'icon', 'icon-spritesheet']);
+}
+
+function isMarketingAsset(asset: EditorAssetSnapshot) {
+  const haystack = getAssetHaystack(asset);
+  return (
+    isAssetKind(asset, ['publication-material']) ||
+    /美宣|宣发|宣传|poster|promo|marketing/u.test(haystack)
+  );
+}
+
+function isSceneAsset(asset: EditorAssetSnapshot) {
+  return /场景|scene|background/u.test(getAssetHaystack(asset));
+}
+
+function isEffectAsset(asset: EditorAssetSnapshot) {
+  return /特效|effect|vfx/u.test(getAssetHaystack(asset));
+}
+
+function isGameAsset(asset: EditorAssetSnapshot) {
+  return /游戏工程|game asset|game package|导出工程/u.test(getAssetHaystack(asset));
+}
+
+function addAssetToGroup(
+  groups: Map<string, ShowcaseAssetGroup>,
+  groupId: string,
+  asset: EditorAssetSnapshot,
+  label?: string,
+) {
+  const group = groups.get(groupId);
+  if (group) {
+    if (label && !group.label) {
+      group.label = label;
+    }
+    group.assets.push(asset);
+    return;
+  }
+
+  groups.set(groupId, {
+    id: groupId,
+    label,
+    assets: [asset],
+  });
+}
+
+function mergeAssetAliasGroups(
+  groups: Map<string, ShowcaseAssetGroup>,
+  asset: EditorAssetSnapshot,
+  label?: string,
+) {
+  const aliasGroups = getAssetReferenceKeys(asset)
+    .map((key) => groups.get(key))
+    .filter((group): group is ShowcaseAssetGroup => Boolean(group))
+    .filter(
+      (group, index, list) =>
+        list.findIndex((candidate) => candidate.id === group.id) === index,
+    );
+
+  const targetGroup = aliasGroups[0] ?? null;
+  if (!targetGroup) {
+    return null;
+  }
+
+  if (label && !targetGroup.label) {
+    targetGroup.label = label;
+  }
+
+  aliasGroups.slice(1).forEach((group) => {
+    if (!targetGroup.label && group.label) {
+      targetGroup.label = group.label;
+    }
+    group.assets.forEach((assetInGroup) => {
+      if (
+        !targetGroup.assets.some(
+          (existingAsset) => existingAsset.assetId === assetInGroup.assetId,
+        )
+      ) {
+        targetGroup.assets.push(assetInGroup);
+      }
+    });
+    groups.delete(group.id);
+  });
+
+  return targetGroup;
+}
+
+function sortGroupAssets(assets: EditorAssetSnapshot[]) {
+  return [...assets].sort((left, right) => {
+    const leftRank = isSpecAsset(left) || isCharacterAsset(left) || isAssetKind(left, ['ui-design'])
+      ? 0
+      : 1;
+    const rightRank =
+      isSpecAsset(right) || isCharacterAsset(right) || isAssetKind(right, ['ui-design'])
+        ? 0
+        : 1;
+    if (leftRank !== rightRank) {
+      return leftRank - rightRank;
+    }
+    return (left.createdAt ?? '').localeCompare(right.createdAt ?? '');
+  });
+}
+
+function groupPackAssets(assets: EditorAssetSnapshot[]) {
+  const groups = new Map<string, ShowcaseAssetGroup>();
+  assets.forEach((asset) => {
+    const specReference = findSpecReference(asset);
+    if (specReference) {
+      addAssetToGroup(groups, getReferenceKey(specReference), asset, specReference.label);
+      return;
+    }
+    if (isSpecAsset(asset)) {
+      addAssetToGroup(groups, getSelfAssetKey(asset), asset, asset.label);
+      return;
+    }
+    addAssetToGroup(groups, `standalone:${asset.assetId}`, asset, asset.label);
+  });
+  const specAssets = assets.filter(isSpecAsset);
+  specAssets.forEach((asset) => {
+    const group = mergeAssetAliasGroups(groups, asset, asset.label);
+    if (group && !group.assets.some((groupAsset) => groupAsset.assetId === asset.assetId)) {
+      group.assets.unshift(asset);
+    }
+  });
+  return [...groups.values()].map((group) => ({
+    ...group,
+    assets: sortGroupAssets(group.assets),
+  }));
+}
+
+function groupCharacterAssets(assets: EditorAssetSnapshot[]) {
+  const groups = new Map<string, ShowcaseAssetGroup>();
+  assets
+    .filter(
+      (asset) =>
+        isCharacterAsset(asset) ||
+        isCharacterAnimationAsset(asset) ||
+        /角色|character/u.test(getAssetHaystack(asset)),
+    )
+    .forEach((asset) => {
+      if (isCharacterAsset(asset)) {
+        addAssetToGroup(groups, getSelfAssetKey(asset), asset, asset.label);
+        return;
+      }
+      const characterReference = findCharacterReference(asset);
+      if (characterReference) {
+        addAssetToGroup(
+          groups,
+          getReferenceKey(characterReference),
+          asset,
+          characterReference.label,
+        );
+        return;
+      }
+      addAssetToGroup(groups, `standalone:${asset.assetId}`, asset, asset.label);
+  });
+  const characterAssets = assets.filter(isCharacterAsset);
+  characterAssets.forEach((asset) => {
+    const group = mergeAssetAliasGroups(groups, asset, asset.label);
+    if (group && !group.assets.some((groupAsset) => groupAsset.assetId === asset.assetId)) {
+      group.assets.unshift(asset);
+    }
+  });
+  return [...groups.values()].map((group) => ({
+    ...group,
+    assets: sortGroupAssets(group.assets),
+  }));
+}
+
+function groupUiAssets(assets: EditorAssetSnapshot[]) {
+  const groups = new Map<string, ShowcaseAssetGroup>();
+  assets
+    .filter((asset) => isUiAsset(asset) || /\bui\b|界面|图标|icon/u.test(getAssetHaystack(asset)))
+    .forEach((asset) => {
+      if (isAssetKind(asset, ['ui-design'])) {
+        addAssetToGroup(groups, getSelfAssetKey(asset), asset, asset.label);
+        return;
+      }
+      const uiReference = findUiDesignReference(asset) ?? findSpecReference(asset);
+      if (uiReference) {
+        addAssetToGroup(groups, getReferenceKey(uiReference), asset, uiReference.label);
+        return;
+      }
+      addAssetToGroup(groups, `standalone:${asset.assetId}`, asset, asset.label);
+  });
+  const uiDesignAssets = assets.filter((asset) => isAssetKind(asset, ['ui-design']));
+  uiDesignAssets.forEach((asset) => {
+    const group = mergeAssetAliasGroups(groups, asset, asset.label);
+    if (group && !group.assets.some((groupAsset) => groupAsset.assetId === asset.assetId)) {
+      group.assets.unshift(asset);
+    }
+  });
+  return [...groups.values()].map((group) => ({
+    ...group,
+    assets: sortGroupAssets(group.assets),
+  }));
+}
+
+function groupSingleAssets(
+  assets: EditorAssetSnapshot[],
+  predicate: (asset: EditorAssetSnapshot) => boolean,
+) {
+  return assets.filter(predicate).map((asset) => ({
+    id: `asset:${asset.assetId}`,
+    label: asset.label,
+    assets: [asset],
+  }));
+}
+
+function getGroupsForTab(assets: EditorAssetSnapshot[], tab: ShowcaseTabId) {
+  if (tab === 'packs') {
+    return groupPackAssets(assets);
+  }
+  if (tab === 'characters') {
+    return groupCharacterAssets(assets);
+  }
+  if (tab === 'ui') {
+    return groupUiAssets(assets);
+  }
+  if (tab === 'music') {
+    return groupSingleAssets(assets, isAudioAsset);
+  }
+  if (tab === 'marketing') {
+    return groupSingleAssets(assets, isMarketingAsset);
+  }
+  if (tab === 'effects') {
+    return groupSingleAssets(assets, isEffectAsset);
+  }
+  if (tab === 'scenes') {
+    return groupSingleAssets(assets, isSceneAsset);
+  }
+  return groupSingleAssets(assets, isGameAsset);
+}
+
+function resolveAssetPrompt(asset: EditorAssetSnapshot) {
+  const directPrompt = asset.prompt?.trim() || asset.actualPrompt?.trim();
+  if (directPrompt) {
+    return directPrompt;
+  }
+
+  const generationFields = asset.generationInputs?.fields ?? [];
+  const firstPromptField =
+    generationFields.find((field) => /提示词|描述|设定|prompt/u.test(field.title)) ??
+    generationFields[0];
+  return firstPromptField?.value?.trim() || UNKNOWN_META_VALUE;
+}
+
+function resolveGroupPrompt(assets: EditorAssetSnapshot[]) {
+  return assets.map(resolveAssetPrompt).find((value) => value !== UNKNOWN_META_VALUE) ?? UNKNOWN_META_VALUE;
+}
+
+function resolveAssetAuthor(
+  asset: EditorAssetSnapshot,
+  fallbackAuthorName?: string | null,
+) {
+  const record = assetRecord(asset);
+  for (const key of SHOWCASE_AUTHOR_KEYS) {
+    const value = normalizeText(record[key]);
+    if (value) {
+      return value;
+    }
+  }
+  return fallbackAuthorName?.trim() || UNKNOWN_META_VALUE;
+}
+
+function resolveGroupAuthor(
+  assets: EditorAssetSnapshot[],
+  fallbackAuthorName?: string | null,
+) {
+  return (
+    assets
+      .map((asset) => resolveAssetAuthor(asset, fallbackAuthorName))
+      .find((value) => value !== UNKNOWN_META_VALUE) ?? UNKNOWN_META_VALUE
+  );
+}
+
+function resolveAssetCost(asset: EditorAssetSnapshot) {
+  const record = assetRecord(asset);
+  for (const key of SHOWCASE_COST_KEYS) {
+    const value = normalizeNumber(record[key]);
+    if (value !== null && value >= 0) {
+      return value;
+    }
+  }
+  const inferredValue = inferAssetCost(asset);
+  if (inferredValue !== null && inferredValue >= 0) {
+    return inferredValue;
+  }
+  return null;
+}
+
+function getAssetCostKey(asset: EditorAssetSnapshot) {
+  if (asset.taskId?.trim()) {
+    return `task:${asset.taskId.trim()}`;
+  }
+  if (asset.objectKey?.trim()) {
+    return `object:${asset.objectKey.trim()}`;
+  }
+  return `asset:${asset.assetId}`;
+}
+
+function inferAssetCost(asset: EditorAssetSnapshot) {
+  const kind = normalizeAssetKind(asset);
+  const model = asset.model;
+  if (kind === 'sound-effect') {
+    return calculateEditorSoundEffectPrice(model ?? DEFAULT_SOUND_EFFECT_MODEL);
+  }
+  if (kind === 'background-music') {
+    return calculateEditorBackgroundMusicPrice(
+      model ?? DEFAULT_BACKGROUND_MUSIC_MODEL,
+    );
+  }
+  if (kind === 'character-animation') {
+    return calculateCharacterAnimationPrice(
+      model ?? CHARACTER_ANIMATION_MODEL,
+      inferVideoResolution(asset, ['480p', '720p'], '480p') as '480p' | '720p',
+      normalizeInt(asset.durationSeconds, 4, 4, 6),
+    );
+  }
+  if (kind === 'video' || isVideoAsset(asset)) {
+    return calculateEditorVideoPrice(
+      model ?? DEFAULT_VIDEO_MODEL,
+      inferVideoResolution(asset, ['480p', '720p', '1080p'], '480p') as
+        | '480p'
+        | '720p'
+        | '1080p',
+      normalizeInt(asset.durationSeconds, DEFAULT_VIDEO_DURATION_SECONDS, 4, 15),
+    );
+  }
+  if (asset.sourceType === 'generated' || kind) {
+    return calculateEditorImageGenerationPrice({ kind, model });
+  }
+  return null;
+}
+
+function inferVideoResolution(
+  asset: EditorAssetSnapshot,
+  allowedValues: string[],
+  fallback: string,
+) {
+  const fields = asset.generationInputs?.fields ?? [];
+  const fieldValue = fields
+    .flatMap((field) => [field.title, field.value])
+    .map((value) => value.trim())
+    .find((value) => /\b(?:480p|720p|1080p)\b/iu.test(value));
+  const matchedValue = fieldValue?.match(/\b(480p|720p|1080p)\b/iu)?.[1];
+  if (matchedValue && allowedValues.includes(matchedValue)) {
+    return matchedValue;
+  }
+  return fallback;
+}
+
+function resolveGroupCost(assets: EditorAssetSnapshot[]) {
+  const resolvedCosts = new Map<string, number>();
+  assets.forEach((asset) => {
+    const cost = resolveAssetCost(asset);
+    if (cost !== null) {
+      resolvedCosts.set(getAssetCostKey(asset), cost);
+    }
+  });
+  const costs = [...resolvedCosts.values()];
+  if (!costs.length) {
+    return UNKNOWN_META_VALUE;
+  }
+  const totalCost = costs.reduce((sum, value) => sum + value, 0);
+  return `${totalCost}泥点`;
+}
+
+function toAssetPreview(asset: EditorAssetSnapshot): ShowcaseAssetPreview {
+  return {
+    id: asset.assetId,
+    label: asset.label,
+    src: asset.imageSrc,
+    objectKey: asset.objectKey,
+    mediaType: resolveAssetMediaType(asset),
+    width: asset.width,
+    height: asset.height,
+  };
+}
+
+function toLibraryShowcaseItem(
+  group: ShowcaseAssetGroup,
+  fallbackAuthorName?: string | null,
+): ShowcaseAssetItem | null {
+  const sortedAssets = sortGroupAssets(group.assets);
+  const previews = sortedAssets.map(toAssetPreview).filter((preview) => preview.src.trim());
+  if (!previews.length) {
+    return null;
+  }
+  const primaryAsset = sortedAssets[0];
+  const label =
+    group.label?.trim() ||
+    primaryAsset?.label?.trim() ||
+    `${previews[0]?.label ?? '素材'}组合`;
+  return {
+    id: group.id,
+    label,
+    previews,
+    prompt: resolveGroupPrompt(sortedAssets),
+    author: resolveGroupAuthor(sortedAssets, fallbackAuthorName),
+    cost: resolveGroupCost(sortedAssets),
+  };
+}
+
+function matchesPublicGalleryTab(
+  entry: PlatformPublicGalleryCard,
+  tab: ShowcaseTabId,
+) {
+  if (tab === 'packs') {
+    return true;
+  }
+  if (tab === 'games') {
+    return false;
+  }
+
+  const themeTags = 'themeTags' in entry ? entry.themeTags : [];
+  const haystack = [
+    entry.worldName,
+    entry.subtitle,
+    entry.summaryText,
+    entry.sourceType,
+    ...themeTags,
+  ]
+    .join(' ')
+    .toLowerCase();
+
+  if (tab === 'characters') {
+    return /角色|character|rpg|visual/u.test(haystack);
+  }
+  if (tab === 'ui') {
+    return /\bui\b|界面|图标|icon|puzzle/u.test(haystack);
+  }
+  if (tab === 'music') {
+    return /音乐|音效|audio|music|sound/u.test(haystack);
+  }
+  if (tab === 'marketing') {
+    return /美宣|宣传|poster|video|视觉|visual/u.test(haystack);
+  }
+  if (tab === 'effects') {
+    return /特效|effect|vfx/u.test(haystack);
+  }
+  if (tab === 'scenes') {
+    return /场景|scene|background|world|rpg/u.test(haystack);
+  }
+  return false;
+}
+
+function toPublicGalleryShowcaseItems(
+  entries: PlatformPublicGalleryCard[],
+  tab: ShowcaseTabId,
+): ShowcaseAssetItem[] {
+  const usedImageSrcs = new Set<string>();
+  const items: ShowcaseAssetItem[] = [];
+
+  entries
+    .filter((entry) => matchesPublicGalleryTab(entry, tab))
+    .forEach((entry) => {
+      const coverImageSrc = resolvePlatformWorldCoverImage(entry).trim();
+      const imageCandidates = [
+        ...resolvePlatformWorldCoverSlides(entry).map((slide) => ({
+          src: slide.imageSrc.trim(),
+          label: slide.label?.trim() || entry.worldName,
+        })),
+        { src: coverImageSrc, label: entry.worldName },
+      ].filter((candidate) => candidate.src);
+
+      imageCandidates.forEach((candidate, index) => {
+        if (usedImageSrcs.has(candidate.src)) {
+          return;
+        }
+        usedImageSrcs.add(candidate.src);
+        items.push({
+          id: `public:${entry.sourceType}:${entry.profileId}:${index}`,
+          label: index === 0 ? entry.worldName : `${entry.worldName} ${index + 1}`,
+          previews: [
+            {
+              id: `public:${entry.profileId}:${index}`,
+              label: candidate.label,
+              src: candidate.src,
+              mediaType: 'image',
+              width: index === 0 ? 720 : 640,
+              height: index === 0 ? 480 : 720,
+            },
+          ],
+          prompt: entry.summaryText || entry.subtitle || UNKNOWN_META_VALUE,
+          author: resolvePlatformWorkAuthorDisplayName(entry),
+          cost: UNKNOWN_META_VALUE,
+        });
+      });
+    });
+
+  return items.slice(0, 36);
+}
+
+export function buildCreationShowcaseItems({
+  activeTab,
+  assetLibrary,
+  publicGalleryEntries,
+  fallbackAuthorName,
+}: {
+  activeTab: ShowcaseTabId;
+  assetLibrary: EditorAssetLibrarySnapshot | null;
+  publicGalleryEntries: PlatformPublicGalleryCard[];
+  fallbackAuthorName?: string | null;
+}) {
+  const libraryItems = getGroupsForTab(assetLibrary?.assets ?? [], activeTab)
+    .map((group) => toLibraryShowcaseItem(group, fallbackAuthorName))
+    .filter((item): item is ShowcaseAssetItem => item !== null);
+
+  if (libraryItems.length > 0) {
+    return libraryItems.slice(0, 36);
+  }
+
+  return toPublicGalleryShowcaseItems(publicGalleryEntries, activeTab);
+}
diff --git a/src/index.css b/src/index.css
index c7fc28769..e6d5d913e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3617,10 +3617,20 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   border: 1px solid rgba(220, 189, 163, 0.78);
   border-radius: 1rem;
   background: rgba(255, 254, 251, 0.88);
+  padding: 0;
+  color: inherit;
+  text-align: left;
   box-shadow: 0 16px 32px rgba(124, 72, 35, 0.1);
+  cursor: zoom-in;
+}
+
+.creation-landing__asset-card:hover {
+  border-color: rgba(195, 104, 48, 0.46);
+  box-shadow: 0 20px 40px rgba(124, 72, 35, 0.14);
 }
 
 .creation-landing__asset-preview {
+  position: relative;
   display: grid;
   min-height: 9.5rem;
   max-height: 23rem;
@@ -3629,6 +3639,64 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background: linear-gradient(180deg, #fffdfa, #fff4ea);
 }
 
+.creation-landing__asset-preview--bundle {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 0.18rem;
+  padding: 0.18rem;
+}
+
+.creation-landing__asset-preview-tile {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 5rem;
+  overflow: hidden;
+  place-items: center;
+  border-radius: 0.72rem;
+  background: rgba(255, 255, 255, 0.66);
+}
+
+.creation-landing__asset-preview-more {
+  position: absolute;
+  right: 0.65rem;
+  bottom: 0.65rem;
+  display: inline-flex;
+  min-width: 2rem;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(44, 31, 22, 0.72);
+  color: #fffdf9;
+  font-size: 0.78rem;
+  font-weight: 850;
+}
+
+.creation-landing__asset-audio-preview {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 8rem;
+  place-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background:
+    linear-gradient(135deg, rgba(244, 187, 129, 0.4), rgba(255, 247, 236, 0.92)),
+    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9), transparent 42%);
+  color: #9a5428;
+}
+
+.creation-landing__asset-audio-preview svg {
+  width: 2.6rem;
+  height: 2.6rem;
+}
+
+.creation-landing__asset-audio-preview audio {
+  width: min(100%, 28rem);
+}
+
 .creation-landing__asset-meta {
   display: grid;
   gap: 0.55rem;
@@ -3675,6 +3743,215 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   white-space: nowrap;
 }
 
+.creation-landing__showcase-modal-overlay {
+  padding: 0.5rem;
+  background: rgba(11, 8, 6, 0.82);
+}
+
+.creation-landing__showcase-modal-panel {
+  width: min(100vw - 1rem, 88rem);
+  height: min(96vh, 64rem);
+  max-height: calc(100vh - 1rem);
+  overflow: hidden;
+  border-radius: 1.2rem;
+  background: #100d0b;
+  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
+}
+
+.creation-landing__showcase-modal-body {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  padding: 0;
+  overflow: hidden;
+}
+
+.creation-landing__showcase-modal {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 18% 12%, rgba(186, 117, 65, 0.18), transparent 32%),
+    #100d0b;
+}
+
+.creation-landing__showcase-modal-close {
+  z-index: 4;
+}
+
+.creation-landing__showcase-modal-stage {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  min-height: 0;
+  overflow: hidden;
+  place-items: center;
+  padding: clamp(1rem, 3vw, 2.5rem);
+}
+
+.creation-landing__showcase-current {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  place-items: center;
+}
+
+.creation-landing__showcase-current > img,
+.creation-landing__showcase-current > video,
+.creation-landing__showcase-current .creation-landing__asset-audio-preview {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 0.9rem;
+}
+
+.creation-landing__showcase-current > img,
+.creation-landing__showcase-current > video {
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  object-position: center;
+  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.32);
+}
+
+.creation-landing__showcase-current > .creation-landing__showcase-media {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+
+.creation-landing__showcase-dock {
+  position: relative;
+  z-index: 3;
+  display: grid;
+  gap: 0.85rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(24, 18, 14, 0.94);
+  backdrop-filter: none;
+  padding: 0.85rem;
+}
+
+.creation-landing__showcase-dock-meta {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.44fr);
+  gap: 0.75rem 1rem;
+  align-items: start;
+  color: #fff8ef;
+}
+
+.creation-landing__showcase-dock-meta h3 {
+  margin: 0;
+  overflow: hidden;
+  color: #fff8ef;
+  font-size: 1rem;
+  font-weight: 860;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.creation-landing__showcase-dock-meta p {
+  grid-column: 1 / 2;
+  display: -webkit-box;
+  min-height: 2.6em;
+  overflow: hidden;
+  margin: 0;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  color: rgba(255, 248, 239, 0.72);
+  font-size: 0.82rem;
+  font-weight: 620;
+  line-height: 1.32;
+}
+
+.creation-landing__showcase-dock-meta dl {
+  display: grid;
+  grid-column: 2 / 3;
+  grid-row: 1 / span 2;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.55rem;
+  margin: 0;
+}
+
+.creation-landing__showcase-dock-meta div {
+  min-width: 0;
+}
+
+.creation-landing__showcase-dock-meta dt {
+  color: rgba(255, 248, 239, 0.5);
+  font-size: 0.68rem;
+  font-weight: 780;
+}
+
+.creation-landing__showcase-dock-meta dd {
+  overflow: hidden;
+  margin: 0;
+  color: #fff8ef;
+  font-size: 0.82rem;
+  font-weight: 820;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.creation-landing__showcase-thumbs {
+  display: flex;
+  gap: 0.55rem;
+  overflow-x: auto;
+  padding-bottom: 0.1rem;
+}
+
+.creation-landing__showcase-thumb {
+  display: grid;
+  flex: 0 0 6.5rem;
+  min-width: 0;
+  gap: 0.38rem;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 0.72rem;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.38rem;
+  color: rgba(255, 248, 239, 0.72);
+  font-size: 0.68rem;
+  font-weight: 760;
+  text-align: center;
+}
+
+.creation-landing__showcase-thumb--active {
+  border-color: rgba(242, 184, 124, 0.8);
+  background: rgba(242, 184, 124, 0.18);
+  color: #fff8ef;
+}
+
+.creation-landing__showcase-thumb-media {
+  display: grid;
+  height: 4.1rem;
+  overflow: hidden;
+  place-items: center;
+  border-radius: 0.52rem;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.creation-landing__showcase-thumb-media svg {
+  width: 1.45rem;
+  height: 1.45rem;
+}
+
+.creation-landing__showcase-thumb > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @media (max-width: 900px) {
   .creation-landing__hero,
   .creation-landing__section {
@@ -3718,6 +3995,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   .creation-landing__asset-waterfall {
     column-count: 2;
   }
+
+  .creation-landing__showcase-modal-panel {
+    width: calc(100vw - 0.7rem);
+    height: calc(100vh - 0.7rem);
+  }
+
+  .creation-landing__showcase-dock-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .creation-landing__showcase-dock-meta p,
+  .creation-landing__showcase-dock-meta dl {
+    grid-column: auto;
+    grid-row: auto;
+  }
 }
 
 @media (max-width: 560px) {
@@ -3763,6 +4055,29 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   .creation-landing__asset-waterfall {
     column-count: 1;
   }
+
+  .creation-landing__showcase-modal-overlay {
+    padding: 0;
+  }
+
+  .creation-landing__showcase-modal-panel {
+    width: 100vw;
+    height: 100vh;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .creation-landing__showcase-modal-stage {
+    padding: 3.2rem 0.75rem 0.75rem;
+  }
+
+  .creation-landing__showcase-dock {
+    padding: 0.72rem;
+  }
+
+  .creation-landing__showcase-thumb {
+    flex-basis: 5.7rem;
+  }
 }
 
 .image-canvas-editor {