AI场景页面优化

hongjli

2025-04-09 bb08754212c3bf9a015f5450e1f77c0d8fbb468b

AI场景页面优化

 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

 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

 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"