root
f2d7037ca2
- Add success/error feedback messages near submit buttons in all admin forms - Display success prompt for 1s before redirect after save - Show API error details on save failure - Add isFeatured/featuredOrder fields to Agent model and admin UI - Add difyApiUrl/difyApiKey fields for per-agent Dify API configuration - Show featured badge column in agent admin list - Display featured agents on homepage sorted by order - Refactor chat page streaming with AbortController and stable userId - Improve Dify API proxy to use per-agent credentials
284 lines
14 KiB
TypeScript
284 lines
14 KiB
TypeScript
import { prisma } from "@/app/lib/prisma"
|
||
import Link from "next/link"
|
||
import Image from "next/image"
|
||
|
||
export default async function HomePage() {
|
||
const agents = await prisma.agent.findMany({
|
||
where: { isFeatured: true },
|
||
include: { category: true },
|
||
orderBy: { featuredOrder: "asc" },
|
||
take: 6,
|
||
})
|
||
|
||
const news = await prisma.news.findMany({
|
||
where: { published: true },
|
||
orderBy: { createdAt: "desc" },
|
||
take: 3,
|
||
})
|
||
|
||
const categories = await prisma.category.findMany({
|
||
include: { _count: { select: { agents: true } } },
|
||
})
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
{/* 导航栏 */}
|
||
<nav className="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-50 shadow-sm">
|
||
<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-gray-600 hover:text-blue-600 transition">智能体广场</Link>
|
||
<Link href="/news" className="text-gray-600 hover:text-blue-600 transition">新闻动态</Link>
|
||
<Link
|
||
href="/admin/login"
|
||
className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition"
|
||
>
|
||
登录
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main className="pt-16">
|
||
{/* Hero 区域 */}
|
||
<section className="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-20">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<div className="flex flex-col lg:flex-row items-center gap-8">
|
||
<div className="lg:w-1/2 space-y-6">
|
||
<h1 className="text-4xl md:text-5xl font-bold">
|
||
探索 AI 智能体的<br />无限可能
|
||
</h1>
|
||
<p className="text-lg text-white/90 leading-relaxed">
|
||
江苏冲浪软件科技有限公司打造的智能体广场，为您提供全方位的 AI 智能体服务，
|
||
助力企业数字化转型，提升个人工作效率。
|
||
</p>
|
||
<div className="flex flex-wrap gap-4">
|
||
<Link
|
||
href="/agents"
|
||
className="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition"
|
||
>
|
||
浏览智能体
|
||
</Link>
|
||
<Link
|
||
href="#features"
|
||
className="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white/10 transition"
|
||
>
|
||
了解更多
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
<div className="lg:w-1/2">
|
||
<div className="bg-white p-6 rounded-2xl shadow-2xl">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white">
|
||
🤖
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900">智能客服助手</h3>
|
||
<p className="text-xs text-gray-500">24/7 在线</p>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-4 mb-4">
|
||
<div className="flex gap-3">
|
||
<div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center flex-shrink-0">
|
||
👤
|
||
</div>
|
||
<div className="bg-gray-100 rounded-lg p-3 max-w-[80%]">
|
||
<p className="text-sm text-gray-800">你好，我想了解一下智能客服助手的功能</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-3 justify-end">
|
||
<div className="bg-blue-50 rounded-lg p-3 max-w-[80%]">
|
||
<p className="text-sm text-gray-800">您好！智能客服助手支持多轮对话、知识库查询、工单提交等功能，24小时在线为您服务。</p>
|
||
</div>
|
||
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white flex-shrink-0">
|
||
🤖
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 热门智能体 */}
|
||
<section className="py-16 bg-white">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<div className="text-center mb-10">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-2">热门智能体</h2>
|
||
<p className="text-gray-500">为您推荐最受欢迎的智能体应用</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
|
||
{agents.map((agent) => (
|
||
<Link
|
||
key={agent.id}
|
||
href={`/agents/${agent.slug}`}
|
||
className="bg-white rounded-2xl border border-gray-200 p-5 hover:border-blue-300 shadow-sm hover:shadow-md transition-all duration-300"
|
||
>
|
||
<div className="flex items-center gap-4 mb-4">
|
||
<div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-3xl flex-shrink-0">
|
||
{agent.icon || "🤖"}
|
||
</div>
|
||
<div className="min-w-0">
|
||
<h3 className="font-semibold text-gray-900 truncate">{agent.name}</h3>
|
||
{agent.category && (
|
||
<span className="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-600">
|
||
{agent.category.name}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<p className="text-gray-500 text-sm leading-relaxed mb-4">{agent.description}</p>
|
||
<div className="flex items-center justify-end">
|
||
<span className="text-blue-600 font-medium hover:underline transition-colors">查看详情 →</span>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
<div className="text-center mt-10">
|
||
<Link href="/agents" className="text-blue-600 font-medium hover:text-blue-700 transition">
|
||
查看全部智能体 →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 数字人应用 */}
|
||
<section className="py-16 bg-gradient-to-br from-purple-50 to-pink-50">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<div className="text-center mb-10">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-2">数字人应用</h2>
|
||
<p className="text-gray-500">探索虚拟数字人角色，体验沉浸式智能交互</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
|
||
{[
|
||
{ name: "小雅", avatar: "👩💼", category: "商务助手", color: "from-purple-500 to-pink-500" },
|
||
{ name: "书淇", avatar: "👩🎓", category: "教育导师", color: "from-blue-500 to-cyan-500" },
|
||
{ name: "樱桃", avatar: "👧", category: "生活陪伴", color: "from-pink-500 to-rose-500" },
|
||
].map((human) => (
|
||
<Link
|
||
key={human.name}
|
||
href="/digital-humans"
|
||
className="bg-white rounded-2xl border border-gray-200 p-5 hover:border-purple-300 shadow-sm hover:shadow-md transition-all duration-300"
|
||
>
|
||
<div className="flex items-center gap-4 mb-4">
|
||
<div className={`w-14 h-14 bg-gradient-to-br ${human.color} rounded-xl flex items-center justify-center text-3xl flex-shrink-0`}>
|
||
{human.avatar}
|
||
</div>
|
||
<div className="min-w-0">
|
||
<h3 className="font-semibold text-gray-900 truncate">{human.name}</h3>
|
||
<span className="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-600">
|
||
{human.category}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<p className="text-gray-500 text-sm leading-relaxed mb-4">
|
||
点击查看数字人详情，开启智能交互体验
|
||
</p>
|
||
<div className="flex items-center justify-end">
|
||
<span className="text-purple-600 font-medium hover:underline transition-colors">查看数字人库 →</span>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
<div className="text-center mt-10">
|
||
<Link href="/digital-humans" className="inline-block bg-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-700 transition">
|
||
查看全部数字人 →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 智能分类与使用场景 */}
|
||
<section id="features" className="py-16 bg-white rounded-3xl shadow-xl -mt-10 relative z-20">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">智能分类与使用场景</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{categories.map((category) => (
|
||
<Link
|
||
key={category.id}
|
||
href={`/agents?category=${category.id}`}
|
||
className="bg-blue-50 rounded-2xl p-6 cursor-pointer hover:bg-blue-100 transition-colors"
|
||
>
|
||
<div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
|
||
{category.icon || "📊"}
|
||
</div>
|
||
<h3 className="font-semibold text-gray-900 text-center mb-2">{category.name}</h3>
|
||
<p className="text-xs text-gray-500 text-center mb-4">{category._count.agents}个智能体</p>
|
||
<p className="text-sm text-gray-600 text-center">{category.description || "智能应用场景"}</p>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 前沿动态 */}
|
||
<section className="py-16">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-8">前沿动态</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||
{news.map((item) => (
|
||
<Link
|
||
key={item.id}
|
||
href={`/news/${item.id}`}
|
||
className="bg-white rounded-2xl border border-gray-200 overflow-hidden hover:border-blue-300 hover:shadow-md transition"
|
||
>
|
||
<div className="h-36 bg-gradient-to-br from-blue-100 to-indigo-100 flex items-center justify-center">
|
||
<span className="text-5xl">📰</span>
|
||
</div>
|
||
<div className="p-5">
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<span className="px-2 py-0.5 bg-blue-50 text-blue-600 text-xs font-medium rounded-full">
|
||
{item.type === "news" ? "新闻" : item.type}
|
||
</span>
|
||
<span className="text-xs text-gray-400">
|
||
{new Date(item.createdAt).toLocaleDateString("zh-CN")}
|
||
</span>
|
||
</div>
|
||
<h3 className="font-semibold text-gray-900 mb-2 leading-snug">{item.title}</h3>
|
||
<p className="text-gray-500 text-sm leading-relaxed">{item.content.substring(0, 100)}...</p>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
<div className="text-center mt-10">
|
||
<Link href="/news" className="text-blue-600 font-medium hover:text-blue-700 transition">
|
||
查看全部 →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
{/* 底部 */}
|
||
<div className="border-t border-gray-200 py-8">
|
||
<div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-7 h-7 bg-blue-600 rounded-lg flex items-center justify-center">
|
||
<span className="text-white font-bold text-xs">AI</span>
|
||
</div>
|
||
<span className="font-semibold text-gray-700 text-sm">江苏冲浪软件科技有限公司</span>
|
||
</div>
|
||
<div className="text-gray-400 text-sm text-center">
|
||
© 2026 江苏冲浪软件科技有限公司 · AI 智能体广场
|
||
</div>
|
||
<div className="flex gap-4 text-xs text-gray-400">
|
||
<a className="hover:text-gray-600 cursor-pointer transition">关于我们</a>
|
||
<a className="hover:text-gray-600 cursor-pointer transition">隐私政策</a>
|
||
<a className="hover:text-gray-600 cursor-pointer transition">联系我们</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|