root
101 lines
3.9 KiB
TypeScript
101 lines
3.9 KiB
TypeScript
import { prisma } from "@/app/lib/prisma"
|
|
import { notFound } from "next/navigation"
|
|
import Link from "next/link"
|
|
|
|
export const dynamic = "force-dynamic"
|
|
|
|
export default async function AgentDetailPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ slug: string }>
|
|
}) {
|
|
const { slug } = await params
|
|
const agent = await prisma.agent.findUnique({
|
|
where: { slug },
|
|
include: { category: true },
|
|
})
|
|
|
|
if (!agent) {
|
|
notFound()
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* 导航栏 */}
|
|
<nav className="bg-white border-b border-gray-200">
|
|
<div className="max-w-6xl mx-auto px-6 py-3">
|
|
<div className="flex items-center justify-between">
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
|
<span className="text-white font-bold text-sm">AI</span>
|
|
</div>
|
|
<span className="font-bold text-gray-900">冲浪智能体广场</span>
|
|
</Link>
|
|
<div className="flex items-center gap-6">
|
|
<Link href="/" className="text-gray-600 hover:text-blue-600 transition">首页</Link>
|
|
<Link href="/agents" className="text-blue-600 font-medium">智能体广场</Link>
|
|
<Link href="/news" className="text-gray-600 hover:text-blue-600 transition">新闻动态</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="max-w-6xl mx-auto px-6 py-12">
|
|
<Link href="/agents" className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-blue-600 mb-8">
|
|
← 返回智能体列表
|
|
</Link>
|
|
|
|
<div className="bg-white rounded-2xl p-8 border border-gray-200">
|
|
<div className="flex items-start gap-6 mb-8">
|
|
<div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center text-4xl flex-shrink-0">
|
|
{agent.icon || "🤖"}
|
|
</div>
|
|
<div className="flex-1">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">{agent.name}</h1>
|
|
{agent.category && (
|
|
<span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-sm font-medium rounded-full">
|
|
{agent.category.name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="prose max-w-none mb-8">
|
|
<p className="text-gray-600 leading-relaxed">{agent.description}</p>
|
|
</div>
|
|
|
|
{agent.features && (
|
|
<div className="mb-8">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">功能特性</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{agent.features.split(",").map((feature, index) => (
|
|
<span key={index} className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full">
|
|
{feature.trim()}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-4 pt-6 border-t border-gray-200">
|
|
<Link
|
|
href={`/agents/${agent.slug}/chat`}
|
|
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium"
|
|
>
|
|
立即使用
|
|
</Link>
|
|
<div className="text-sm text-gray-500">
|
|
使用次数: <span className="font-semibold text-gray-900">{agent.usageCount}</span>
|
|
</div>
|
|
<div className="text-sm text-gray-500">
|
|
状态: <span className={`font-medium ${agent.status === "active" ? "text-green-600" : "text-gray-600"}`}>
|
|
{agent.status === "active" ? "运行中" : agent.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|