主页优化

hongjli

2025-04-08 2785a58a36240c531a41f2feb634102f411b01a0

 src/app/page.tsx

@@ -1,77 +1,426 @@
"use client";

import { useState } from 'react';
import Sidebar from '@/components/layout/Sidebar';
import Card from '@/components/Card';
import ChatDialog from '@/components/ChatDialog';

const services = [
  {
    title: '补料',
    description: '智能动态分析产线，工位的缺料情况，降低停线风险',
    imageUrl: '/images/kanban.jpg',
    chatbotId: 'JELkWpPLHQfRNhEH'
  },
  {
    title: '插单',
    description: '智能评估需求插单对产能，原材料和交付服务的影响，提升客户满意度',
    imageUrl: '/images/xuqiu.jpg',
    chatbotId: 'DfH4cIzujVGvn5iR'
  },
  {
    title: '科沃斯销售推荐小助手',
    description: '智能化产品推荐提升导购效率',
    imageUrl: '/images/robot.jpg',
    chatbotId: 'sUAviPXvcEIw3oQC'
  },
  {
    title: '库存管理知识库问答',
    description: '库存知识，提供专业的供应链库存知识问答',
    imageUrl: '/images/know.jpg',
    chatbotId: 'pDDfkU9HyBl2gzXx'
  },
];
import Link from 'next/link';
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import SupplyChainAIMindMap from '@/components/SupplyChainAIMindMap';

export default function Home() {
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [currentChatbot, setCurrentChatbot] = useState('');
  const [mounted, setMounted] = useState(false);
  const [isClient, setIsClient] = useState(false);
  
  useEffect(() => {
    setMounted(true);
    setIsClient(true);
    
    // 确保页面刷新时滚动到顶部
    window.scrollTo(0, 0);
  }, []);
  
  // 定义动画变体
  const fadeInUp = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
  };
  
  const fadeInLeft = {
    hidden: { opacity: 0, x: -100 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] } }
  };
  
  const fadeInRight = {
    hidden: { opacity: 0, x: 100 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] } }
  };
  
  const fadeInScale = {
    hidden: { opacity: 0, scale: 0.95 },
    visible: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: "easeOut" } }
  };

  const handleCardClick = (title: string, chatbotId?: string) => {
    if (chatbotId) {
      setCurrentChatbot(chatbotId);
      setIsChatOpen(true);
    }
  // 按钮出场动画
  const buttonVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: (i: number) => ({
      opacity: 1,
      y: 0,
      transition: {
        delay: i * 0.15,
        duration: 0.4,
        ease: [0.25, 0.1, 0.25, 1],
      },
    }),
  };

  return (
    <div className="flex">
      <Sidebar />
      <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">
              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>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {services.map((service, index) => (
              <Card
                key={index}
                {...service}
                onClick={() => handleCardClick(service.title, service.chatbotId)}
    <main className="relative w-full min-h-screen bg-[#0A1033] text-white overflow-hidden px-4 -mt-[1px]">
      {/* 顶部导航背景延伸层 */}
      <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[#1E2B63] to-[#0A1033] z-0"></div>
      
      <div className="max-w-7xl mx-auto py-0">
        {/* 主要内容部分 */}
        <div className="relative z-10 min-h-screen pt-48 pb-24">
          {/* 公司名称和目标描述 */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: false, margin: "-100px" }}
            transition={{ duration: 0.4, ease: "easeOut" }}
            className="text-center mb-32 relative will-change-transform"
          >
            {/* 背景装饰效果 */}
            <div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none">
              <motion.div 
                className="absolute top-1/2 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"
                initial={{ scaleX: 0 }}
                whileInView={{ scaleX: 1 }}
                viewport={{ once: false, margin: "-100px" }}
                transition={{ duration: 0.8, delay: 0.2 }}
              />
            ))}
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                {[...Array(2)].map((_, i) => (
                  <motion.div
                    key={i}
                    className="absolute rounded-full border border-[#6ADBFF]/20"
                    style={{
                      left: "50%",
                      top: "50%",
                      width: "160px",
                      height: "160px",
                      willChange: "transform, opacity"
                    }}
                    initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.1 }}
                    whileInView={{ scale: [0, 5 + i], opacity: [0.2, 0] }}
                    viewport={{ once: false, margin: "-100px" }}
                    transition={{ 
                      duration: 2,
                      repeat: Infinity,
                      delay: i * 0.6
                    }}
                  />
                ))}
              </div>
            </div>

            <motion.h1 
              className="text-4xl md:text-5xl font-bold mb-3 relative inline-block"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: false, margin: "-100px" }}
              transition={{ duration: 0.4, ease: "easeOut" }}
            >
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB] relative">
                帷幄君成
                <motion.span 
                  className="absolute -top-1 -right-3 w-2 h-2 rounded-full bg-[#6ADBFF]"
                  animate={{ 
                    scale: [1, 1.5, 1],
                    opacity: [0.6, 1, 0.6] 
                  }}
                  transition={{ 
                    duration: 1.5,
                    repeat: Infinity,
                    ease: "easeInOut"
                  }}
                />
              </span>
            </motion.h1>
            
            <div className="relative h-1 w-32 mx-auto mb-5 overflow-hidden">
              <motion.div 
                className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB]"
                initial={{ scaleX: 0 }}
                whileInView={{ scaleX: 1 }}
                viewport={{ once: false, margin: "-100px" }}
                transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
                style={{ originX: 0 }}
              />
            </div>
            
            <motion.div 
              className="text-gray-300 max-w-2xl mx-auto text-lg relative"
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: false, margin: "-100px" }}
              transition={{ duration: 0.4, delay: 0.4 }}
            >
              智能化供应链管理，
              <motion.span 
                className="inline-block text-[#6ADBFF] px-1"
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                viewport={{ once: false, margin: "-100px" }}
                transition={{ duration: 0.3, delay: 0.6 }}
              >
                AI模拟APS场景
              </motion.span>
              的领航者
              
              {/* 装饰线条 */}
              <motion.div 
                className="absolute left-1/2 bottom-[-22px] w-16 h-[2px] -translate-x-1/2"
                initial={{ scale: 0 }}
                whileInView={{ scale: 1 }}
                viewport={{ once: false, margin: "-100px" }}
                transition={{ duration: 0.4, delay: 0.7 }}
              >
                <div className="w-full h-full bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF] to-[#6ADBFF]/0"></div>
              </motion.div>
            </motion.div>
          </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">
              <motion.div
                custom={0}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={buttonVariants}
                whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
                className="group relative will-change-transform"
              >
                <div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB] opacity-30 blur group-hover:opacity-100 group-hover:blur-md transition-all duration-500 group-hover:duration-200 group-active:opacity-70"></div>
                <div className="relative flex items-center gap-2 px-10 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#6ADBFF]/30 transition-all duration-300 shadow-[0_0_15px_rgba(106,219,255,0.15)] group-hover:shadow-[0_0_25px_rgba(106,219,255,0.25)] group-active:shadow-[0_0_10px_rgba(106,219,255,0.3)]">
                  <span className="text-white font-medium">AI场景模拟</span>
                  
                  {/* 粒子效果 */}
                  <div className="absolute inset-0 overflow-hidden rounded-lg">
                    {[...Array(6)].map((_, i) => (
                      <motion.div
                        key={i}
                        className="absolute w-1 h-1 rounded-full bg-[#6ADBFF]"
                        initial={{ x: "100%", y: "100%", opacity: 0 }}
                        animate={{ 
                          x: ["100%", `${Math.random() * 100}%`, "0%"], 
                          y: ["100%", `${Math.random() * 100}%`, "0%"],
                          opacity: [0, 1, 0]
                        }}
                        transition={{ 
                          duration: 2 + Math.random() * 3, 
                          repeat: Infinity, 
                          repeatType: "loop",
                          ease: "easeInOut",
                          delay: i * 0.2
                        }}
                      />
                    ))}
                  </div>
                </div>
              </motion.div>
            </Link>

            <Link href="/chat">
              <motion.div
                custom={1}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={buttonVariants}
                whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
                className="group relative will-change-transform"
              >
                <div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[#FF6A88] to-[#5E72EB] opacity-30 blur group-hover:opacity-100 group-hover:blur-md transition-all duration-500 group-hover:duration-200 group-active:opacity-70"></div>
                <div className="relative flex items-center gap-2 px-10 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#FF6A88]/30 transition-all duration-300 shadow-[0_0_15px_rgba(255,106,136,0.15)] group-hover:shadow-[0_0_25px_rgba(255,106,136,0.25)] group-active:shadow-[0_0_10px_rgba(255,106,136,0.3)]">
                  <span className="text-white font-medium">开始聊天</span>
                  
                  {/* 波纹效果 */}
                  <div className="absolute inset-0 overflow-hidden rounded-lg">
                    {[...Array(3)].map((_, i) => (
                      <motion.div
                        key={i}
                        className="absolute rounded-full border border-[#FF6A88]/20"
                        style={{
                          left: "50%",
                          top: "50%",
                          width: "10px",
                          height: "10px",
                        }}
                        initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.5 }}
                        animate={{ 
                          scale: [0, 8],
                          opacity: [0.5, 0]
                        }}
                        transition={{ 
                          duration: 2,
                          repeat: Infinity,
                          delay: i * 0.6
                        }}
                      />
                    ))}
                  </div>
                </div>
              </motion.div>
            </Link>
          </div>

          {/* AI赋能APS优势全景 - 独立区块 */}
          <section className="w-full py-12 relative mb-24">
            <SupplyChainAIMindMap />
          </section>
          
          {/* AI赋能APS核心技术优势部分 */}
          <section className="w-full py-16 relative mb-20">
            {/* 标题 */}
            <motion.div
              initial="hidden"
              whileInView="visible"
              viewport={{ once: false, margin: "-100px" }}
              variants={fadeInUp}
              className="text-center mb-16"
            >
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB]">
                  AI赋能APS
                </span> 核心技术优势
              </h2>
              <div className="h-1 w-24 mx-auto bg-gradient-to-r from-[#6ADBFF] to-[#FF6A88]"></div>
            </motion.div>

            {/* 技术卡片 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mt-16">
              {/* 左侧：量子启发算法 */}
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInLeft}
                className="relative will-change-transform"
              >
                <div className="absolute -left-3 top-0 h-full w-1 bg-gradient-to-b from-[#6ADBFF] via-[#5E72EB] to-transparent"></div>
                <div className="backdrop-blur-sm bg-white/5 rounded-xl p-8 border border-[#6ADBFF]/20 h-full">
                  <h3 className="text-2xl font-semibold text-white mb-4">量子启发算法</h3>
                  <p className="text-gray-300 leading-relaxed mb-6">
                    基于量子计算原理设计的优化算法，能够在指数级复杂度的排程问题中快速寻找近似最优解。
                  </p>
                </div>
              </motion.div>
              
              {/* 右侧：深度学习预测 */}
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInRight}
                className="relative will-change-transform"
              >
                <div className="absolute -left-3 top-0 h-full w-1 bg-gradient-to-b from-[#FF6A88] via-[#5E72EB] to-transparent"></div>
                <div className="backdrop-blur-sm bg-white/5 rounded-xl p-8 border border-[#FF6A88]/20 h-full">
                  <h3 className="text-2xl font-semibold text-white mb-4">深度学习预测</h3>
                  <p className="text-gray-300 leading-relaxed mb-6">
                    采用自研的时间序列深度学习架构，对生产环境中的关键指标进行精准预测。
                  </p>
                </div>
              </motion.div>
            </div>
            
            {/* 数字指标区域 */}
            <motion.div
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: false, margin: "-100px" }}
              transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1], delay: 0.2 }}
              className="mt-20 w-full grid grid-cols-2 md:grid-cols-4 gap-8 will-change-transform"
            >
              <div className="text-center">
                <div className="text-4xl font-bold text-[#6ADBFF] mb-2">98%</div>
                <p className="text-gray-300">计划准确率</p>
              </div>
              <div className="text-center">
                <div className="text-4xl font-bold text-[#5E72EB] mb-2">45%</div>
                <p className="text-gray-300">效率提升</p>
              </div>
              <div className="text-center">
                <div className="text-4xl font-bold text-[#FF6A88] mb-2">30%</div>
                <p className="text-gray-300">成本降低</p>
              </div>
              <div className="text-center">
                <div className="text-4xl font-bold text-white mb-2">500+</div>
                <p className="text-gray-300">企业案例</p>
              </div>
            </motion.div>
          </section>
          
          {/* 应用场景区域 */}
          <section className="w-full py-10 relative">
            <motion.div
              initial="hidden"
              whileInView="visible"
              viewport={{ once: false, margin: "-100px" }}
              variants={fadeInUp}
              className="text-center mb-16"
            >
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF]">
                  应用场景
                </span>
              </h2>
              <div className="h-1 w-24 mx-auto bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF]"></div>
            </motion.div>
            
            {/* 应用场景卡片 */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
              {/* 应用场景卡片内容 */}
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInUp}
                transition={{ delay: 0.1 }}
                className="bg-[#131C41]/70 p-6 rounded-xl border border-[#6ADBFF]/20"
              >
                <h3 className="text-xl font-semibold text-white mb-4">离散制造</h3>
                <p className="text-gray-300">
                  在零部件多、工艺复杂的离散制造环境中，我们的解决方案能够同时考虑设备利用率、交期、在制品库存等多维目标，生成最优排程方案。
                </p>
              </motion.div>
              
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInUp}
                transition={{ delay: 0.2 }}
                className="bg-[#131C41]/70 p-6 rounded-xl border border-[#6ADBFF]/20"
              >
                <h3 className="text-xl font-semibold text-white mb-4">流程工业</h3>
                <p className="text-gray-300">
                  针对连续生产特性，我们的解决方案实现了原料采购、生产计划与排程的一体化优化，最小化切换损耗和能源消耗，提高产线利用率。
                </p>
              </motion.div>
              
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInUp}
                transition={{ delay: 0.3 }}
                className="bg-[#131C41]/70 p-6 rounded-xl border border-[#6ADBFF]/20"
              >
                <h3 className="text-xl font-semibold text-white mb-4">物流仓储</h3>
                <p className="text-gray-300">
                  优化仓储布局与拣选路径，结合机器人调度系统，实现高效率、低差错的智能物流管理，提升仓储中心整体运营效率。
                </p>
              </motion.div>
            </div>
          </section>
        </div>
        
        {/* 动态波形图 - 放在页面底部 */}
        <div className="relative w-full h-20 opacity-20 mt-auto">
          <svg className="w-full h-full" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,36c200,0,200,84,400,84c200,0,200-84,400-84c200,0,200,84,400,84c200,0,200-84,400-84v84H0V36z" fill="url(#blueGradient)"></path>
            <defs>
              <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#6ADBFF" stopOpacity="0.5" />
                <stop offset="50%" stopColor="#5E72EB" stopOpacity="0.5" />
                <stop offset="100%" stopColor="#6ADBFF" stopOpacity="0.5" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      <ChatDialog 
        isOpen={isChatOpen} 
        onClose={() => setIsChatOpen(false)}
        chatbotId={currentChatbot}
      />
    </div>
    </main>
  );
}