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