better list

This commit is contained in:
songtianlun 2025-08-01 23:23:31 +08:00
parent 44e90059b3
commit a4f92b2da8

View File

@ -457,8 +457,7 @@ export default function StudioPage() {
<div className="hidden md:flex items-center px-4 py-3 bg-muted/50 rounded-lg text-sm font-semibold text-muted-foreground border border-border/50"> <div className="hidden md:flex items-center px-4 py-3 bg-muted/50 rounded-lg text-sm font-semibold text-muted-foreground border border-border/50">
<div className="flex-1 min-w-0">{t('promptName')}</div> <div className="flex-1 min-w-0">{t('promptName')}</div>
<div className="w-28 text-center hidden lg:block">{t('updatedAt')}</div> <div className="w-28 text-center hidden lg:block">{t('updatedAt')}</div>
<div className="w-24 text-center hidden xl:block">{t('lastUsed')}</div> <div className="w-32 text-center">{t('tags')}</div>
<div className="w-16 text-center">{t('tags')}</div>
<div className="w-20 text-center">Actions</div> <div className="w-20 text-center">Actions</div>
</div> </div>
@ -477,11 +476,6 @@ export default function StudioPage() {
{prompt.name} {prompt.name}
</span> </span>
</h3> </h3>
<div className="flex items-center space-x-1 md:hidden">
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded-full">
{prompt.tags?.length || 0} tags
</span>
</div>
</div> </div>
<p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed mb-2"> <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed mb-2">
{prompt.description || 'No description available'} {prompt.description || 'No description available'}
@ -489,12 +483,7 @@ export default function StudioPage() {
{/* Mobile metadata */} {/* Mobile metadata */}
<div className="flex items-center justify-between text-xs text-muted-foreground md:hidden"> <div className="flex items-center justify-between text-xs text-muted-foreground md:hidden">
<div className="flex items-center space-x-3"> <span>Updated {formatDate(prompt.updatedAt)}</span>
<span>Updated {formatDate(prompt.updatedAt)}</span>
{prompt.lastUsed && (
<span>Used {formatDate(prompt.lastUsed)}</span>
)}
</div>
{prompt.currentVersion && ( {prompt.currentVersion && (
<span className="bg-muted px-2 py-1 rounded text-xs font-medium"> <span className="bg-muted px-2 py-1 rounded text-xs font-medium">
v{prompt.currentVersion} v{prompt.currentVersion}
@ -504,24 +493,27 @@ export default function StudioPage() {
{/* Mobile tags */} {/* Mobile tags */}
<div className="flex flex-wrap gap-1 mt-2 md:hidden"> <div className="flex flex-wrap gap-1 mt-2 md:hidden">
{prompt.tags?.slice(0, 3).map((tag: string | { name: string }) => { {prompt.tags?.slice(0, 4).map((tag: string | { name: string }) => {
const tagName = typeof tag === 'string' ? tag : tag?.name || ''; const tagName = typeof tag === 'string' ? tag : tag?.name || '';
const displayTag = tagName.length > 15 ? tagName.slice(0, 15) + '...' : tagName; const displayTag = tagName.length > 12 ? tagName.slice(0, 12) + '...' : tagName;
return ( return (
<span <span
key={tagName} key={tagName}
className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-primary/5 text-primary/80 rounded-full border border-primary/10" className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full border border-primary/20"
title={tagName} title={tagName}
> >
{displayTag} {displayTag}
</span> </span>
); );
})} })}
{prompt.tags && prompt.tags.length > 3 && ( {prompt.tags && prompt.tags.length > 4 && (
<span className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded-full"> <span className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded-full" title={`${prompt.tags.length - 4} more tags`}>
+{prompt.tags.length - 3} +{prompt.tags.length - 4}
</span> </span>
)} )}
{(!prompt.tags || prompt.tags.length === 0) && (
<span className="text-xs text-muted-foreground/50 italic">No tags</span>
)}
</div> </div>
</div> </div>
@ -530,13 +522,30 @@ export default function StudioPage() {
<div className="w-28 text-sm text-muted-foreground text-center hidden lg:block"> <div className="w-28 text-sm text-muted-foreground text-center hidden lg:block">
{formatDate(prompt.updatedAt)} {formatDate(prompt.updatedAt)}
</div> </div>
<div className="w-24 text-sm text-muted-foreground text-center hidden xl:block"> <div className="w-32 flex justify-center">
{prompt.lastUsed ? formatDate(prompt.lastUsed) : t('never')} <div className="flex flex-wrap gap-1 items-center justify-center">
</div> {prompt.tags?.slice(0, 2).map((tag: string | { name: string }) => {
<div className="w-16 flex justify-center"> const tagName = typeof tag === 'string' ? tag : tag?.name || '';
<span className="inline-flex items-center px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full border border-primary/20"> const displayTag = tagName.length > 8 ? tagName.slice(0, 8) + '...' : tagName;
{prompt.tags?.length || 0} return (
</span> <span
key={tagName}
className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full border border-primary/20"
title={tagName}
>
{displayTag}
</span>
);
})}
{prompt.tags && prompt.tags.length > 2 && (
<span className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded-full" title={`${prompt.tags.length - 2} more tags`}>
+{prompt.tags.length - 2}
</span>
)}
{(!prompt.tags || prompt.tags.length === 0) && (
<span className="text-xs text-muted-foreground/50 italic">No tags</span>
)}
</div>
</div> </div>
</div> </div>