fix: 导航 i18n 补全 + 模型/提示词页 useT()
- Header 导航 skills/models/articles 改为 t.nav.*(英文正常显示) - 模型百科页全部文字使用 useT()(表格标题、标签等) - 提示词库页标题使用 useT() - models 翻译键补全 contextWindow/maxOutput
This commit is contained in:
@@ -4,66 +4,51 @@ import { useEffect, useState } from 'react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { MessageSquare, Heart } from 'lucide-react';
|
||||
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;
|
||||
}
|
||||
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" />
|
||||
<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));
|
||||
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">提示词库</h1>
|
||||
<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">{[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>
|
||||
)}
|
||||
{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>
|
||||
<Heart className="w-3.5 h-3.5" /><span>{prompt.likeCount}</span>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user