fix: 导航 i18n 补全 + 模型/提示词页 useT()

- Header 导航 skills/models/articles 改为 t.nav.*(英文正常显示)
- 模型百科页全部文字使用 useT()(表格标题、标签等)
- 提示词库页标题使用 useT()
- models 翻译键补全 contextWindow/maxOutput
This commit is contained in:
yuzhiran-dev
2026-05-25 09:22:25 +08:00
parent 03b500b778
commit e64a874499
5 changed files with 39 additions and 87 deletions
+12 -27
View File
@@ -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>
))}