feat: 添加数字人页面，包含8个写实风格人物卡片

- 新建 digital-humans 页面，展示8个数字人角色 - 使用public/human目录下的写实美女图片 - 卡片采用左图右文布局，4列响应式设计 - 图片上添加左下角遮罩显示姓名 - 首页添加数字人应用入口区域 - 调整卡片间距和样式优化
2026-05-06 19:03:51 +08:00
parent a3ee04379d
commit 77ad8beb3d
11 changed files with 281 additions and 3 deletions
@@ -0,0 +1,233 @@
+import Link from "next/link"
+import Image from "next/image"
+
+const digitalHumans = [
+  {
+    id: 1,
+    name: "小雅",
+    avatar: "/human/0ac179c47f1957d03ccc6858e6351f1d.jpeg",
+    category: "商务助手",
+    description: "专业的商务顾问，擅长企业咨询、市场分析、商务谈判等场景，为您提供智能化的商业决策支持。",
+    color: "from-purple-500 to-pink-500",
+    bgColor: "bg-purple-50",
+    textColor: "text-purple-600",
+  },
+  {
+    id: 2,
+    name: "书淇",
+    avatar: "/human/166c0f9202afc463e9264529764ddb7f.jpg",
+    category: "教育导师",
+    description: "知识渊博的教育专家，专注于在线教学、课程辅导、学习规划，让学习更高效、更有趣。",
+    color: "from-blue-500 to-cyan-500",
+    bgColor: "bg-blue-50",
+    textColor: "text-blue-600",
+  },
+  {
+    id: 3,
+    name: "樱桃",
+    avatar: "/human/541ab483fbafcc7b5476a63dbd350fb5.jpg",
+    category: "生活陪伴",
+    description: "活泼可爱的虚拟伙伴，擅长日常聊天、情感陪伴、生活建议，为您的生活增添温暖与乐趣。",
+    color: "from-pink-500 to-rose-500",
+    bgColor: "bg-pink-50",
+    textColor: "text-pink-600",
+  },
+  {
+    id: 4,
+    name: "星辰",
+    avatar: "/human/8365454662deb53637146f8b81476124.png",
+    category: "科技顾问",
+    description: "前沿科技专家，精通AI技术、编程开发、技术咨询，助力您在数字时代保持竞争力。",
+    color: "from-indigo-500 to-blue-500",
+    bgColor: "bg-indigo-50",
+    textColor: "text-indigo-600",
+  },
+  {
+    id: 5,
+    name: "墨竹",
+    avatar: "/human/a4c1285f4d131a65821a541c1d58181a.jpg",
+    category: "创意设计",
+    description: "富有创意的设计师，擅长视觉设计、艺术创作、品牌策划，为您的创意项目注入灵感。",
+    color: "from-green-500 to-emerald-500",
+    bgColor: "bg-green-50",
+    textColor: "text-green-600",
+  },
+  {
+    id: 6,
+    name: "清风",
+    avatar: "/human/aa5332e4434fcf0cc8bcb9a4d8122ad0.jpeg",
+    category: "健康顾问",
+    description: "专业的健康管理师，提供健康咨询、饮食建议、运动指导，守护您和家人的健康生活。",
+    color: "from-teal-500 to-cyan-500",
+    bgColor: "bg-teal-50",
+    textColor: "text-teal-600",
+  },
+  {
+    id: 7,
+    name: "小悦",
+    avatar: "/human/dd709ef07f783ef0b912127191004580.jpg",
+    category: "娱乐主播",
+    description: "活力四射的娱乐主播，擅长直播互动、内容策划、粉丝运营，为您的娱乐生活带来无限精彩。",
+    color: "from-orange-500 to-amber-500",
+    bgColor: "bg-orange-50",
+    textColor: "text-orange-600",
+  },
+  {
+    id: 8,
+    name: "心灵",
+    avatar: "/human/decbb93c49351eae57b4f3251cab9f26.jpg",
+    category: "心理咨询",
+    description: "温柔专业的心理咨询师，提供情绪疏导、心理测评、压力管理，守护您的心理健康。",
+    color: "from-violet-500 to-purple-500",
+    bgColor: "bg-violet-50",
+    textColor: "text-violet-600",
+  },
+]
+
+const categories = ["全部", "商务助手", "教育导师", "生活陪伴", "科技顾问", "创意设计", "健康顾问", "娱乐主播", "心理咨询"]
+
+export default function DigitalHumansPage() {
+  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="/digital-humans" className="text-blue-600 font-medium">数字人</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-purple-600 to-pink-600 text-white py-20">
+          <div className="max-w-6xl mx-auto px-6 text-center">
+            <div className="text-6xl mb-6">🧑💼</div>
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">
+              数字人库
+            </h1>
+            <p className="text-lg text-white/90 leading-relaxed max-w-2xl mx-auto">
+              探索我们的虚拟数字人角色，每个数字人都拥有独特的个性、专业技能和应用场景，
+              为您的工作和生活提供智能化服务。
+            </p>
+          </div>
+        </section>
+
+        {/* 分类筛选 */}
+        <section className="py-8 bg-white border-b border-gray-200">
+          <div className="max-w-6xl mx-auto px-6">
+            <div className="flex flex-wrap gap-3 justify-center">
+              {categories.map((category) => (
+                <button
+                  key={category}
+                  className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                    category === "全部"
+                      ? "bg-purple-600 text-white"
+                      : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                  }`}
+                >
+                  {category}
+                </button>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* 数字人列表 */}
+        <section className="py-16">
+          <div className="max-w-6xl mx-auto px-6">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-12">
+              {digitalHumans.map((human) => (
+                <div
+                  key={human.id}
+                  className="bg-white rounded-2xl border border-gray-200 overflow-hidden hover:border-purple-300 hover:shadow-lg transition-all duration-300"
+                >
+                  {/* 图片区域 */}
+                  <div className="relative aspect-[3/4] overflow-hidden">
+                    <Image
+                      src={human.avatar}
+                      alt={human.name}
+                      fill
+                      className="object-contain"
+                    />
+                    {/* 左下角遮罩显示姓名 */}
+                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
+                      <h3 className="text-lg font-bold text-white">{human.name}</h3>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* 特性介绍 */}
+        <section className="py-16 bg-white">
+          <div className="max-w-6xl mx-auto px-6">
+            <h2 className="text-2xl font-bold text-gray-900 text-center mb-10">为什么选择我们的数字人</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <div className="text-center p-6">
+                <div className="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
+                  🎭
+                </div>
+                <h3 className="font-semibold text-gray-900 mb-2">逼真形象</h3>
+                <p className="text-sm text-gray-500">超写实数字人形象，支持表情动画、语音交互，带来沉浸式体验</p>
+              </div>
+              <div className="text-center p-6">
+                <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
+                  🧠
+                </div>
+                <h3 className="font-semibold text-gray-900 mb-2">智能交互</h3>
+                <p className="text-sm text-gray-500">基于大语言模型，支持多轮对话、上下文理解、智能决策</p>
+              </div>
+              <div className="text-center p-6">
+                <div className="w-16 h-16 bg-pink-100 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
+                  🎯
+                </div>
+                <h3 className="font-semibold text-gray-900 mb-2">场景定制</h3>
+                <p className="text-sm text-gray-500">针对不同应用场景深度优化，满足商务、教育、生活等多元需求</p>
+              </div>
+            </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>
+  )
+}
@@ -1,4 +1,4 @@
-import { prisma } from "@//app/lib/prisma"
+import { prisma } from "@/app/lib/prisma"
 import Link from "next/link"
 import Image from "next/image"

@@ -15,8 +15,7 @@ export default async function HomePage() {
  })

  const categories = await prisma.category.findMany({
-    include: { _count: { select: { agents: true } },
-    },
+    include: { _count: { select: { agents: true } } },
  })

  return (
@@ -151,6 +150,52 @@ export default async function HomePage() {
          </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">