yuzhiran-dev
e64a874499
- Header 导航 skills/models/articles 改为 t.nav.*（英文正常显示） - 模型百科页全部文字使用 useT()（表格标题、标签等） - 提示词库页标题使用 useT() - models 翻译键补全 contextWindow/maxOutput
60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import { Card } from '@/components/ui/card';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Skeleton } from '@/components/ui/skeleton';
|
||
import { Heart } from 'lucide-react';
|
||
import { API_BASE } from '@/lib/config';
|
||
import { useT } from '@/i18n';
|
||
|
||
interface Prompt { id: number; title: string; description: string; content: string; model: string | null; likeCount: number; tags: string | null }
|
||
|
||
function PromptSkeleton() {
|
||
return (
|
||
<Card className="p-5">
|
||
<div className="flex gap-2 mb-2"><Skeleton className="h-5 w-16 rounded-full" /><Skeleton className="h-5 w-20 rounded-full" /></div>
|
||
<Skeleton className="h-5 w-3/4 mb-1" /><Skeleton className="h-4 w-full mb-2" /><Skeleton className="h-4 w-16" />
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
export default function PromptsPage() {
|
||
const t = useT();
|
||
const [prompts, setPrompts] = useState<Prompt[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
fetch(`${API_BASE}/prompts`).then(r => r.json()).then(data => setPrompts(data.items || [])).catch(() => {}).finally(() => setLoading(false));
|
||
}, []);
|
||
|
||
return (
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||
<div className="mb-10">
|
||
<h1 className="text-3xl font-bold text-foreground">{t.nav.prompts}</h1>
|
||
<p className="mt-2 text-muted-foreground">精选提示词模板，开箱即用</p>
|
||
</div>
|
||
|
||
{loading ? (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">{[1,2,3,4].map(i => <PromptSkeleton key={i} />)}</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{prompts.map((prompt) => (
|
||
<Card key={prompt.id} className="p-5 hover:shadow-md transition-shadow group">
|
||
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
||
{prompt.tags?.split(',').slice(0, 2).map(tag => <Badge key={tag} variant="default">{tag.trim()}</Badge>)}
|
||
{prompt.model && <span className="text-xs text-muted-foreground ml-auto">{prompt.model}</span>}
|
||
</div>
|
||
<h3 className="font-semibold group-hover:text-brand-600 transition-colors mb-1">{prompt.title}</h3>
|
||
<p className="text-sm text-muted-foreground mb-3 line-clamp-2">{prompt.description || prompt.content}</p>
|
||
<div className="flex items-center gap-1 text-sm text-muted-foreground">
|
||
<Heart className="w-3.5 h-3.5" /><span>{prompt.likeCount}</span>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|