From da12ed0bbb4ac917f58fba737b83831515ed935d Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Thu, 21 May 2026 02:19:55 +0800
Subject: [PATCH] auto-save 2026-05-21 02:19 (~2)

---
 .memory/worklog.json         |  7 +++++
 src/components/PackPanel.tsx | 54 ++++++++++++++++++++----------------
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/.memory/worklog.json b/.memory/worklog.json
index 224d3b3..43c2b0f 100644
--- a/.memory/worklog.json
+++ b/.memory/worklog.json
@@ -1867,6 +1867,13 @@
       "message": "auto-save 2026-05-20 23:53 (~2)",
       "hash": "e85be86",
       "files_changed": 2
+    },
+    {
+      "ts": "2026-05-21T02:09:03+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-21 02:09 (~5)",
+      "hash": "fa6e32b",
+      "files_changed": 5
     }
   ]
 }
diff --git a/src/components/PackPanel.tsx b/src/components/PackPanel.tsx
index c810460..f7a7ddd 100644
--- a/src/components/PackPanel.tsx
+++ b/src/components/PackPanel.tsx
@@ -310,30 +310,42 @@ function TextTemplateSection({
         </div>
       </div>
 
-      <div className="px-4 pb-4 border-t border-white/[0.05] space-y-2 pt-3">
+      <div className="grid grid-cols-1 gap-3 border-t border-white/[0.05] p-4 lg:grid-cols-2 2xl:grid-cols-3">
         {TEXT_TEMPLATES.map(template => {
           const isOpen = showPromptId === template.id;
           const asset = byTemplate.get(template.id);
           return (
-            <div key={template.id} className="grid grid-cols-[72px_minmax(0,1fr)_auto] gap-3 p-3 rounded-[8px] bg-white/[0.025] ring-1 ring-white/[0.05] hover:ring-white/[0.1] transition-all">
-              <div className="aspect-square rounded-[8px] bg-gradient-to-br from-[#8cb478]/15 to-[#d6b36a]/15 ring-1 ring-[#8cb478]/20 flex flex-col items-center justify-center text-[#cfe7a7] text-[9px] font-mono gap-0.5">
-                <span>text</span>
-                <span className="text-[8px] text-[#cfe7a7]/60">{template.outputFormat}</span>
-              </div>
-              <div className="min-w-0 space-y-1">
-                <div className="flex items-center gap-1.5 flex-wrap">
-                  <span className="text-[13px] font-medium text-white">{template.title}</span>
+            <div key={template.id} className="flex min-h-[240px] min-w-0 flex-col rounded-[8px] bg-white/[0.025] p-3 ring-1 ring-white/[0.05] transition-all hover:ring-white/[0.12]">
+              <div className="mb-3 flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="flex items-center gap-1.5 flex-wrap">
+                    <span className="text-[13px] font-semibold text-white">{template.title}</span>
+                    {template.required && <span className="text-[9px] text-[#e6f578]/80 uppercase tracking-widest">必备</span>}
+                  </div>
+                  <p className="mt-1 line-clamp-2 text-[11px] leading-relaxed text-white/45">{template.description}</p>
+                </div>
+                <div className="flex shrink-0 flex-col items-end gap-1 text-right">
                   <span className={`chip text-[10px] py-0 ${template.kind === 'patent' ? 'bg-[#e6f578]/15 text-[#e6f578] border-[#e6f578]/30' : template.kind === 'production' ? 'bg-[#d6b36a]/15 text-[#f2d38c] border-[#d6b36a]/30' : template.kind === 'accessories' ? 'bg-[#8cb478]/15 text-[#cfe7a7] border-[#8cb478]/30' : template.kind === 'marketing' ? 'bg-[#b6df72]/15 text-[#dff5a8] border-[#b6df72]/30' : 'chip-neutral'}`}>
                     {template.kind}
                   </span>
-                  {template.required && <span className="text-[9px] text-[#e6f578]/80 uppercase tracking-widest">必备</span>}
+                  <span className="font-mono text-[9px] uppercase tracking-wider text-white/28">{template.outputFormat}</span>
                 </div>
-                <p className="text-[11px] text-white/45 line-clamp-1">{template.description}</p>
-                {asset && (
-                  <pre className="mt-2 max-h-36 overflow-y-auto rounded-lg bg-black/32 p-3 text-[11px] leading-relaxed text-white/72 ring-1 ring-white/[0.06] whitespace-pre-wrap">
+              </div>
+              <div className="min-h-0 flex-1">
+                {asset ? (
+                  <pre className="h-full max-h-52 overflow-y-auto rounded-lg bg-black/32 p-3 text-[11px] leading-relaxed text-white/72 ring-1 ring-white/[0.06] whitespace-pre-wrap">
                     {asset.content}
                   </pre>
+                ) : (
+                  <div className="grid h-full min-h-28 place-items-center rounded-lg border border-dashed border-white/10 bg-black/16 text-[11px] text-white/28">
+                    待生成文字
+                  </div>
                 )}
+              </div>
+              <div className="mt-3 flex items-center justify-between gap-3">
+                <span className={`text-[10px] ${asset ? 'text-[#dff5a8]' : 'text-white/25'}`}>
+                  {asset ? '完成' : '待生成'}
+                </span>
                 <button
                   onClick={() => setShowPromptId(isOpen ? null : template.id)}
                   className="text-[10px] text-white/30 hover:text-[#cfe7a7] transition-colors flex items-center gap-1"
@@ -343,18 +355,12 @@ function TextTemplateSection({
                   </svg>
                   Prompt
                 </button>
-                {isOpen && (
-                  <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">
-                    {template.promptTemplate}
-                  </pre>
-                )}
-              </div>
-              <div className="flex flex-col items-end justify-between text-right shrink-0">
-                <span className="text-[9px] text-white/25 uppercase tracking-wider">{template.outputFormat}</span>
-                <span className={`text-[10px] ${asset ? 'text-[#dff5a8]' : 'text-white/25'}`}>
-                  {asset ? '完成' : '待生成'}
-                </span>
               </div>
+              {isOpen && (
+                <pre className="mt-3 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">
+                  {template.promptTemplate}
+                </pre>
+              )}
             </div>
           );
         })}