From d3d9349e8ba5a23c38a140f61148c0c2e05cc749 Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Wed, 20 May 2026 19:00:44 +0800
Subject: [PATCH] fix: show pack assets as horizontal detail strip

---
 src/app/globals.css          | 187 +++++++++++++++++++++
 src/components/PackPanel.tsx | 303 +++++++++++++++++++++++------------
 2 files changed, 389 insertions(+), 101 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 6de13b2..0cd04e3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -784,6 +784,181 @@ input, textarea {
   background: rgba(255, 255, 255, 0.16);
 }
 
+.asset-strip {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  overflow-y: visible;
+  padding-bottom: 4px;
+  scroll-snap-type: x proximity;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,0.18) transparent;
+}
+
+.asset-strip::-webkit-scrollbar {
+  height: 8px;
+}
+
+.asset-strip::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(255,255,255,0.16);
+}
+
+.asset-tile {
+  flex: 0 0 clamp(136px, 12vw, 172px);
+  scroll-snap-align: start;
+  border-radius: 8px;
+  background: rgba(255,255,255,0.035);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
+  padding: 10px;
+  text-align: left;
+  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+
+.asset-tile:hover {
+  background: rgba(255,255,255,0.065);
+  box-shadow:
+    inset 0 0 0 1px rgba(230,245,120,0.22),
+    0 18px 50px -34px rgba(230,245,120,0.55);
+  transform: translateY(-1px);
+}
+
+.asset-tile:focus-visible {
+  outline: 2px solid rgba(230,245,120,0.45);
+  outline-offset: 2px;
+}
+
+.asset-tile__thumb {
+  position: relative;
+  display: grid;
+  height: 118px;
+  width: 100%;
+  place-items: center;
+  overflow: visible;
+  border-radius: 8px;
+  background: rgba(0,0,0,0.28);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
+}
+
+.asset-tile__thumb > img {
+  max-height: 118px;
+}
+
+.asset-tile__state {
+  position: absolute;
+  right: 6px;
+  top: 6px;
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border-radius: 7px;
+  background: rgba(0,0,0,0.62);
+  color: rgba(255,255,255,0.62);
+  font-size: 10px;
+  font-weight: 700;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
+}
+
+.asset-tile__state--done {
+  background: rgba(230,245,120,0.14);
+  color: #e6f578;
+  box-shadow: inset 0 0 0 1px rgba(230,245,120,0.28);
+}
+
+.asset-tile__body {
+  min-width: 0;
+  padding-top: 9px;
+}
+
+.asset-detail-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 92;
+  pointer-events: none;
+  background: rgba(0,0,0,0.44);
+  opacity: 0;
+  backdrop-filter: blur(6px);
+  transition: opacity 180ms ease;
+}
+
+.asset-detail-backdrop.is-open {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.asset-detail-drawer {
+  position: fixed;
+  z-index: 96;
+  top: 0;
+  right: 0;
+  display: flex;
+  width: min(780px, calc(100vw - 96px));
+  height: 100vh;
+  flex-direction: column;
+  border-left: 1px solid rgba(255,255,255,0.14);
+  background:
+    linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035)),
+    rgba(20,20,21,0.94);
+  box-shadow: -28px 0 90px -34px rgba(0,0,0,0.92);
+  backdrop-filter: blur(22px);
+  transform: translateX(100%);
+  transition: transform 220ms ease;
+}
+
+.asset-detail-drawer.is-open {
+  transform: translateX(0);
+}
+
+.asset-detail-image {
+  display: grid;
+  max-height: min(54vh, 520px);
+  place-items: center;
+  overflow: hidden;
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(238,242,230,0.94));
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.46);
+}
+
+.asset-detail-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.asset-detail-block {
+  margin-top: 14px;
+  border-radius: 8px;
+  background: rgba(0,0,0,0.22);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
+  padding: 13px;
+}
+
+.asset-detail-label {
+  margin-bottom: 8px;
+  color: rgba(255,255,255,0.42);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.asset-detail-code,
+.asset-detail-pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 11px;
+  line-height: 1.6;
+  color: rgba(255,255,255,0.68);
+  overflow-wrap: anywhere;
+}
+
+.asset-detail-pre {
+  max-height: 220px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
 .gallery-thumb-list {
   scrollbar-width: none;
 }
@@ -899,6 +1074,18 @@ input, textarea {
     display: none;
   }
 
+  .asset-tile {
+    flex-basis: 142px;
+  }
+
+  .asset-detail-drawer {
+    width: calc(100vw - 28px);
+  }
+
+  .asset-detail-image {
+    max-height: 42vh;
+  }
+
   .session-workspace {
     height: auto;
     min-height: 0;
diff --git a/src/components/PackPanel.tsx b/src/components/PackPanel.tsx
index 850756f..2f93cd9 100644
--- a/src/components/PackPanel.tsx
+++ b/src/components/PackPanel.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import type { AssetPack, AssetTemplate, GenImage, GenSession, PackKind, ToyAsset } from '@/lib/types';
 import { PACK_LABELS, PACK_ORDER, PACK_TEMPLATES, TEXT_TEMPLATES, VIDEO_TEMPLATES } from '@/lib/templates';
 import { HoverImagePreview } from './HoverImagePreview';
@@ -34,121 +35,214 @@ function aspectCss(aspectRatio: AssetTemplate['aspectRatio'] | string | undefine
   return aspectRatio.replace(':', ' / ');
 }
 
-/* ── Asset Row ────────────────────────────────── */
-function AssetRow({ template, asset, accent, onRegenerate }: {
+type AssetDetail = {
   template: AssetTemplate;
   asset: ToyAsset | undefined;
-  accent: typeof PACK_ACCENT[PackKind];
-  onRegenerate?: (assetId: string, userRefinement?: string) => Promise<void>;
+};
+
+function formatDate(timestamp?: number) {
+  if (!timestamp) return '未生成';
+  return new Date(timestamp).toLocaleString('zh-CN');
+}
+
+function AssetTile({ template, asset, onOpen }: {
+  template: AssetTemplate;
+  asset: ToyAsset | undefined;
+  onOpen: () => void;
 }) {
-  const [showPrompt, setShowPrompt] = useState(false);
-  const [showRedo, setShowRedo] = useState(false);
+  const ready = !!asset;
+
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      className={`asset-tile ${ready ? 'asset-tile--ready' : ''}`}
+      title={ready ? `查看${template.title}详情` : `查看${template.title}要求`}
+    >
+      <div className="asset-tile__thumb" style={{ aspectRatio: aspectCss(asset?.aspectRatio ?? template.aspectRatio) }}>
+        {ready ? (
+          <HoverImagePreview
+            src={asset!.url}
+            alt={template.title}
+            aspectRatio={asset!.aspectRatio}
+            imageClassName="h-full w-full rounded-[8px] bg-white object-contain"
+          />
+        ) : (
+          <div className="grid h-full w-full place-items-center rounded-[8px] bg-black/28">
+            <span className="font-mono text-[10px] text-white/32">{template.aspectRatio}</span>
+          </div>
+        )}
+        <span className={`asset-tile__state ${ready ? 'asset-tile__state--done' : ''}`}>
+          {ready ? '✓' : '待'}
+        </span>
+      </div>
+      <div className="asset-tile__body">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <span className="truncate text-[12px] font-semibold text-white">{template.title}</span>
+          {template.required && <span className="shrink-0 text-[9px] text-[#e6f578]/75">必备</span>}
+        </div>
+        <p className="mt-1 line-clamp-2 text-left text-[10px] leading-relaxed text-white/42">{template.description}</p>
+        <div className="mt-2 flex items-center justify-between gap-2">
+          <span className="font-mono text-[9px] text-white/34">{ASPECT_PX[template.aspectRatio]}</span>
+          <span className={`font-mono text-[10px] ${ready ? 'text-[#dff5a8]' : 'text-white/28'}`}>
+            {ready ? `L${asset!.derivationLevel}` : 'EMPTY'}
+          </span>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+function AssetDetailDrawer({ detail, onClose, onRegenerate }: {
+  detail: AssetDetail | null;
+  onClose: () => void;
+  onRegenerate: (assetId: string, userRefinement?: string) => Promise<void>;
+}) {
+  const [mounted, setMounted] = useState(false);
   const [refinement, setRefinement] = useState('');
   const [regenerating, setRegenerating] = useState(false);
-  const ready = !!asset;
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!detail) return;
+    setRefinement('');
+    function handleKey(event: KeyboardEvent) {
+      if (event.key === 'Escape') onClose();
+    }
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [detail, onClose]);
+
   async function handleRedo() {
+    const asset = detail?.asset;
     if (!asset || !onRegenerate || regenerating) return;
     const ok = window.confirm('重新生成这 1 张会再次调用图片模型并产生费用。确认继续？');
     if (!ok) return;
     setRegenerating(true);
     try {
       await onRegenerate(asset.id, refinement);
-      setShowRedo(false);
       setRefinement('');
+      onClose();
     } finally {
       setRegenerating(false);
     }
   }
+
+  if (!mounted) return null;
+
+  const template = detail?.template;
+  const asset = detail?.asset;
+  const ready = !!asset;
+  const drawer = (
+    <>
+      <div className={`asset-detail-backdrop ${detail ? 'is-open' : ''}`} onClick={onClose} />
+      <aside className={`asset-detail-drawer ${detail ? 'is-open' : ''}`} aria-hidden={!detail}>
+        {template && (
+          <>
+            <div className="flex shrink-0 items-start justify-between gap-4 border-b border-white/10 p-5">
+              <div className="min-w-0">
+                <span className="section-eyebrow">Asset Detail</span>
+                <h2 className="mt-2 text-lg font-semibold text-white">{template.title}</h2>
+                <p className="mt-1 text-xs leading-relaxed text-white/44">{template.description}</p>
+              </div>
+              <button
+                type="button"
+                onClick={onClose}
+                className="grid h-10 w-10 shrink-0 place-items-center rounded-[8px] bg-white/[0.06] text-white/60 ring-1 ring-white/10 transition-colors hover:bg-white/[0.10] hover:text-white"
+                title="关闭详情"
+                aria-label="关闭详情"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" aria-hidden="true">
+                  <path d="M6 6l12 12M18 6 6 18" strokeLinecap="round" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-y-auto p-5">
+              <div className="asset-detail-image" style={{ aspectRatio: aspectCss(asset?.aspectRatio ?? template.aspectRatio) }}>
+                {ready ? (
+                  <img src={asset.url} alt={template.title} />
+                ) : (
+                  <div className="grid h-full w-full place-items-center text-sm text-white/36">待生成</div>
+                )}
+              </div>
+
+              <div className="mt-4 grid grid-cols-2 gap-2 text-[11px]">
+                <DetailItem label="状态" value={ready ? asset.status : '待生成'} />
+                <DetailItem label="尺寸" value={ASPECT_PX[template.aspectRatio]} />
+                <DetailItem label="比例" value={asset?.aspectRatio ?? template.aspectRatio} />
+                <DetailItem label="层级" value={ready ? `L${asset.derivationLevel}` : '-'} />
+                <DetailItem label="视图" value={asset?.view ?? template.view} />
+                <DetailItem label="创建" value={formatDate(asset?.createdAt)} />
+                <DetailItem label="模板" value={template.id} />
+                <DetailItem label="版本" value={asset?.version ?? '-'} />
+              </div>
+
+              {(asset?.anchorAssetId || asset?.anchorImageUrl) && (
+                <div className="asset-detail-block">
+                  <div className="asset-detail-label">Anchor</div>
+                  <div className="asset-detail-code">{asset.anchorAssetId ?? asset.anchorImageUrl}</div>
+                </div>
+              )}
+
+              <div className="asset-detail-block">
+                <div className="asset-detail-label">Prompt</div>
+                <pre className="asset-detail-pre">{asset?.prompt ?? template.promptTemplate}</pre>
+              </div>
+
+              {template.checklist.length > 0 && (
+                <div className="asset-detail-block">
+                  <div className="asset-detail-label">检查点</div>
+                  <div className="space-y-1.5">
+                    {template.checklist.map(item => (
+                      <div key={item} className="flex gap-2 text-[11px] leading-relaxed text-white/62">
+                        <span className="mt-[7px] h-1 w-1 shrink-0 rounded-full bg-[#e6f578]/70" />
+                        <span>{item}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {ready && (
+                <div className="asset-detail-block">
+                  <div className="asset-detail-label">单张重做</div>
+                  <div className="flex gap-2">
+                    <input
+                      value={refinement}
+                      onChange={event => setRefinement(event.target.value)}
+                      placeholder="补充重做要求"
+                      className="min-w-0 flex-1 rounded-[8px] bg-black/30 px-3 py-2 text-[12px] text-white/82 outline-none ring-1 ring-white/[0.09] focus:ring-[#e6f578]/40"
+                    />
+                    <button
+                      type="button"
+                      onClick={handleRedo}
+                      disabled={regenerating}
+                      className="rounded-[8px] bg-[#d6b36a]/18 px-4 py-2 text-[12px] font-semibold text-[#f2d38c] ring-1 ring-[#d6b36a]/24 transition-colors hover:bg-[#d6b36a]/26 disabled:opacity-40"
+                    >
+                      {regenerating ? '...' : '确认'}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </aside>
+    </>
+  );
+
+  return createPortal(drawer, document.body);
+}
+
+function DetailItem({ label, value }: { label: string; value: string | number }) {
   return (
-    <div className="grid grid-cols-[72px_minmax(0,1fr)_minmax(78px,auto)] gap-3 p-3 rounded-[8px] bg-white/[0.035] ring-1 ring-white/[0.06] hover:bg-white/[0.05] hover:ring-white/[0.12] transition-all 2xl:grid-cols-[84px_minmax(0,1fr)_minmax(104px,auto)]">
-      {/* thumbnail */}
-      <div
-        className="relative flex w-[70px] max-h-[86px] items-center justify-center overflow-visible rounded-[8px] bg-black/30 ring-1 ring-white/[0.08] 2xl:w-[82px] 2xl:max-h-[98px]"
-        style={{ aspectRatio: aspectCss(asset?.aspectRatio ?? template.aspectRatio) }}
-      >
-        {ready ? (
-          <HoverImagePreview
-            src={asset!.url}
-            alt={template.title}
-            aspectRatio={asset!.aspectRatio}
-            imageClassName="max-w-full max-h-full object-contain rounded-lg bg-white"
-          />
-        ) : (
-          <div className="flex flex-col items-center gap-1 rounded-lg bg-black/25 px-2 py-1" style={{ aspectRatio: aspectCss(template.aspectRatio) }}>
-            <span className="text-[9px] text-white/30 font-mono">{template.aspectRatio}</span>
-          </div>
-        )}
-        {template.required && !ready && (
-          <span className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-[#e6f578] ring-2 ring-[#e6f578]/30" />
-        )}
-      </div>
-
-      {/* info */}
-      <div className="min-w-0 space-y-1.5">
-        <div className="flex items-center gap-1.5 flex-wrap">
-          <span className="text-[13px] font-medium text-white leading-snug">{template.title}</span>
-          {template.required && !ready && (
-            <span className="text-[9px] text-[#e6f578]/80 uppercase tracking-widest">必备</span>
-          )}
-          {ready && <span className="chip chip-live text-[10px] py-0">✓</span>}
-        </div>
-        <p className="text-[11px] text-white/45 leading-relaxed line-clamp-1">{template.description}</p>
-        <button
-          onClick={() => setShowPrompt(s => !s)}
-          className="text-[10px] text-white/30 hover:text-[#e6f578] transition-colors flex items-center gap-1"
-        >
-          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-            <path d={showPrompt ? 'M6 9l6 6 6-6' : 'M9 6l6 6-6 6'} strokeLinecap="round" />
-          </svg>
-          Prompt
-        </button>
-        {showPrompt && (
-          <pre className="p-2 text-[10px] text-white/60 bg-black/40 rounded-lg ring-1 ring-white/[0.07] font-mono whitespace-pre-wrap break-all max-h-28 overflow-y-auto">
-            {asset?.prompt ?? template.promptTemplate}
-          </pre>
-        )}
-        {ready && asset.anchorImageUrl && (
-          <div className="text-[10px] text-white/35 font-mono truncate">
-            anchor: {asset.anchorAssetId ?? asset.anchorImageUrl}
-          </div>
-        )}
-      </div>
-
-      {/* meta */}
-      <div className="flex shrink-0 flex-col items-end justify-between gap-3 text-right">
-        <span className="text-[10px] font-mono text-white/40">{ASPECT_PX[template.aspectRatio]}</span>
-        <div className="flex flex-col items-end gap-1">
-          <span className={`text-[10px] ${ready ? 'text-[#dff5a8]' : 'text-white/25'}`}>
-            {ready ? `L${asset!.derivationLevel}` : '待生成'}
-          </span>
-          {ready && onRegenerate && (
-            <button
-              onClick={() => setShowRedo(value => !value)}
-              className="mt-1 rounded-[8px] bg-white/[0.055] px-2 py-1.5 text-[10px] text-white/60 ring-1 ring-white/[0.08] transition-colors hover:bg-white/[0.10] hover:text-white 2xl:px-2.5"
-            >
-              {showRedo ? '收起重做' : '重做'}
-            </button>
-          )}
-        </div>
-      </div>
-
-      {showRedo && ready && (
-        <div className="col-start-2 col-span-2 flex items-center gap-2 border-t border-amber-400/10 pt-2">
-          <input
-            value={refinement}
-            onChange={event => setRefinement(event.target.value)}
-            placeholder="重做要求"
-            className="min-w-0 flex-1 rounded-[8px] bg-black/30 ring-1 ring-white/[0.08] px-2.5 py-2 text-[11px] text-white/80 outline-none focus:ring-[#e6f578]/40"
-          />
-          <button
-            onClick={handleRedo}
-            disabled={regenerating}
-            className="rounded-[8px] bg-[#d6b36a]/18 px-3 py-2 text-[10px] text-[#f2d38c] ring-1 ring-[#d6b36a]/24 transition-colors hover:bg-[#d6b36a]/26 disabled:opacity-40"
-          >
-            {regenerating ? '...' : '确认重做'}
-          </button>
-        </div>
-      )}
+    <div className="rounded-[8px] bg-white/[0.035] p-3 ring-1 ring-white/[0.07]">
+      <div className="text-[10px] text-white/34">{label}</div>
+      <div className="mt-1 truncate text-[12px] text-white/76">{value}</div>
     </div>
   );
 }
@@ -163,6 +257,7 @@ function PackSection({ kind, pack, locked, lockReason, stepIndex, onRegenerateAs
   onRegenerateAsset: (assetId: string, userRefinement?: string) => Promise<void>;
 }) {
   const [open, setOpen] = useState(kind === 'patent');
+  const [detail, setDetail] = useState<AssetDetail | null>(null);
   const accent = PACK_ACCENT[kind];
   const templates = PACK_TEMPLATES[kind];
   const generatedCount = pack?.assets.length ?? 0;
@@ -203,17 +298,23 @@ function PackSection({ kind, pack, locked, lockReason, stepIndex, onRegenerateAs
 
       {/* asset list — collapsible */}
       {open && (
-        <div className="px-4 pb-4 space-y-2 border-t border-white/[0.05]">
-          <div className="pt-3 space-y-2">
+        <div className="border-t border-white/[0.05] px-4 pb-4">
+          <div className="asset-strip pt-3">
             {templates.map(template => {
               const asset = pack?.assets.find(a => a.templateId === template.id);
               return (
-                <AssetRow key={template.id} template={template} asset={asset} accent={accent} onRegenerate={onRegenerateAsset} />
+                <AssetTile
+                  key={template.id}
+                  template={template}
+                  asset={asset}
+                  onOpen={() => setDetail({ template, asset })}
+                />
               );
             })}
           </div>
         </div>
       )}
+      <AssetDetailDrawer detail={detail} onClose={() => setDetail(null)} onRegenerate={onRegenerateAsset} />
     </section>
   );
 }