From bb08754212c3bf9a015f5450e1f77c0d8fbb468b Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期三, 09 四月 2025 14:17:04 +0800
Subject: [PATCH] AI场景页面优化
---
src/app/ai-scene/page.tsx | 36 +++++++++++++++---
src/app/page.tsx | 31 ++++++++-------
src/components/layout/Navbar.tsx | 8 ++--
3 files changed, 51 insertions(+), 24 deletions(-)
diff --git a/src/app/ai-scene/page.tsx b/src/app/ai-scene/page.tsx
index 5d0a809..8accf02 100644
--- a/src/app/ai-scene/page.tsx
+++ b/src/app/ai-scene/page.tsx
@@ -4,6 +4,7 @@
import Card from '@/components/Card';
import ChatDialog from '@/components/ChatDialog';
import SceneIntroDialog from '@/components/SceneIntroDialog';
+import { motion } from 'framer-motion';
const services = [
{
@@ -62,14 +63,37 @@
<div className="min-h-screen pt-16">
<div className="flex-1 p-6 md:p-8 bg-gradient-to-b from-[var(--ai-surface)] to-white">
<div className="max-w-7xl mx-auto">
- <div className="mb-8">
- <h1 className="text-3xl font-bold text-[var(--ai-primary)] mb-2">
+ <motion.div
+ className="mb-8"
+ initial={{ opacity: 0, y: 20 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={{ duration: 0.6, ease: "easeOut" }}
+ >
+ <motion.h1
+ className="text-3xl font-bold text-[var(--ai-primary)] mb-2"
+ initial={{ opacity: 0, x: -20 }}
+ animate={{ opacity: 1, x: 0 }}
+ transition={{ duration: 0.5, delay: 0.2 }}
+ >
AI鍦烘櫙妯℃嫙
<span className="ml-2 inline-block w-2 h-2 rounded-full bg-[var(--ai-secondary)] animate-pulse"></span>
- </h1>
- <p className="text-gray-600">閫夋嫨浠ヤ笅鍦烘櫙锛屼綋楠屼汉宸ユ櫤鑳藉浣曡В鍐冲疄闄呬笟鍔￠棶棰�</p>
- <div className="h-1 w-24 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-accent)] mt-4"></div>
- </div>
+ </motion.h1>
+ <motion.p
+ className="text-gray-600"
+ initial={{ opacity: 0, x: -20 }}
+ animate={{ opacity: 1, x: 0 }}
+ transition={{ duration: 0.5, delay: 0.3 }}
+ >
+ 閫夋嫨浠ヤ笅鍦烘櫙锛屼綋楠屼汉宸ユ櫤鑳藉浣曡В鍐冲疄闄呬笟鍔￠棶棰�
+ </motion.p>
+ <motion.div
+ className="h-1 w-24 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-accent)]"
+ initial={{ scaleX: 0, opacity: 0 }}
+ animate={{ scaleX: 1, opacity: 1 }}
+ transition={{ duration: 0.6, delay: 0.4 }}
+ style={{ originX: 0 }}
+ ></motion.div>
+ </motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{services.map((service, index) => (
<Card
diff --git a/src/app/page.tsx b/src/app/page.tsx
index cc2abb1..af7c629 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -170,8 +170,8 @@
</motion.div>
{/* 浜や簰鎸夐挳缁� - 椤堕儴 */}
- <div className="flex flex-col sm:flex-row justify-center items-center gap-6 sm:gap-12 mb-28 mt-16">
- <Link href="/ai-scene">
+ <div className="flex flex-col sm:flex-row items-center justify-center gap-6 mb-20">
+ <a href="/ai-scene">
<motion.div
custom={0}
initial="hidden"
@@ -187,29 +187,32 @@
{/* 绮掑瓙鏁堟灉 */}
<div className="absolute inset-0 overflow-hidden rounded-lg">
- {[...Array(6)].map((_, i) => (
+ {[...Array(3)].map((_, i) => (
<motion.div
key={i}
- className="absolute w-1 h-1 rounded-full bg-[#6ADBFF]"
- initial={{ x: "100%", y: "100%", opacity: 0 }}
+ className="absolute rounded-full border border-[#6ADBFF]/20"
+ style={{
+ left: "50%",
+ top: "50%",
+ width: "10px",
+ height: "10px",
+ }}
+ initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.5 }}
animate={{
- x: ["100%", `${Math.random() * 100}%`, "0%"],
- y: ["100%", `${Math.random() * 100}%`, "0%"],
- opacity: [0, 1, 0]
+ scale: [0, 8],
+ opacity: [0.5, 0]
}}
transition={{
- duration: 2 + Math.random() * 3,
- repeat: Infinity,
- repeatType: "loop",
- ease: "easeInOut",
- delay: i * 0.2
+ duration: 2,
+ repeat: Infinity,
+ delay: i * 0.6
}}
/>
))}
</div>
</div>
</motion.div>
- </Link>
+ </a>
<Link href="/chat">
<motion.div
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 9000e20..758dd19 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -157,7 +157,7 @@
{/* 瀵艰埅鑿滃崟 - 澧炲姞z-index纭繚鍦ㄥ姩鏁堜箣涓� */}
<div className="hidden md:flex items-center space-x-8 relative z-20">
- <Link
+ <a
href="/ai-scene"
className="relative px-3 py-2 text-sm font-medium"
onMouseEnter={() => setActiveMenu('ai-scene')}
@@ -166,7 +166,7 @@
<span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'ai-scene' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>AI鍦烘櫙妯℃嫙</span>
<span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
transition-all duration-300 ${activeMenu === 'ai-scene' ? 'w-full' : 'w-0'}`}></span>
- </Link>
+ </a>
<Link
href="/chat"
@@ -267,13 +267,13 @@
>
<div className="p-3 space-y-1 bg-gradient-to-b from-[#1E2B63] to-[#0A1033]
border-t border-[#6ADBFF]/10">
- <Link
+ <a
href="/ai-scene"
className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF]
hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200"
>
AI鍦烘櫙妯℃嫙
- </Link>
+ </a>
<Link
href="/chat"
--
Gitblit v1.9.3