主页面优化

hongjli

2025-04-07 dc5ccbb11801c997fd91b427341e4ea79f95b084

主页面优化

 src/app/ai-scene/page.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,77 @@
"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'
  },
];

export default function AIScenePage() {
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [currentChatbot, setCurrentChatbot] = useState('');

  const handleCardClick = (title: string, chatbotId?: string) => {
    if (chatbotId) {
      setCurrentChatbot(chatbotId);
      setIsChatOpen(true);
    }
  };

  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)}
              />
            ))}
          </div>
        </div>
      </div>
      <ChatDialog 
        isOpen={isChatOpen} 
        onClose={() => setIsChatOpen(false)}
        chatbotId={currentChatbot}
      />
    </div>
  );
} 

 src/app/globals.css

@@ -55,6 +55,20 @@
  animation-delay: 0.5s;
}

/* é¡µé¢å†…容淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fadeIn {
  animation: fadeIn 0.6s ease-out;
}

/* Logo圆环脉冲动画 */
@keyframes logo-ring-pulse {
  0% {
@@ -236,36 +250,29 @@

/* AI数据流效果动画 */
@keyframes dataflowY {
  0% {
    background-position: 0 -200px;
  from {
    transform: translateY(-100%);
  }
  100% {
    background-position: 0 200px;
  to {
    transform: translateY(100%);
  }
}

@keyframes dataflowX {
  0% {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate-dataflowY {
  background-image: linear-gradient(to bottom, transparent 0%, rgba(106, 219, 255, 0.4) 50%, transparent 100%);
  background-size: 100% 200px;
  animation: dataflowY 8s linear infinite;
  animation: dataflowY 3s linear infinite;
}

.animate-dataflowX {
  animation: dataflowX 4s infinite;
  animation: dataflowX 5s linear infinite;
}

/* æŒ‰é’®å€¾æ–œåŠ¨ç”» */
@@ -296,7 +303,7 @@
}

.animate-scanline {
  animation: scanline 8s linear infinite;
  animation: scanline 3s ease-in-out infinite;
}

/* åŸºç¡€æ¸å˜åŠ¨ç”» */
@@ -439,11 +446,11 @@
}

@keyframes dataflowY {
  0% {
    background-position: 0 -200px;
  from {
    transform: translateY(-100%);
  }
  100% {
    background-position: 0 200px;
  to {
    transform: translateY(100%);
  }
}

@@ -483,7 +490,7 @@
}

.animate-data-blink {
  animation: data-blink 3s ease-in-out infinite;
  animation: data-blink 2s ease-in-out infinite;
}

.animate-data-blink-slow {
@@ -491,27 +498,16 @@
}

.animate-dataflowY {
  background-image: linear-gradient(to bottom, transparent 0%, rgba(106, 219, 255, 0.4) 50%, transparent 100%);
  background-size: 100% 200px;
  animation: dataflowY 8s linear infinite;
  animation: dataflowY 3s linear infinite;
}

.animate-scanline {
  animation: scanline 8s linear infinite;
  animation: scanline 3s ease-in-out infinite;
}

.animate-fade-in {
  animation: fadeIn 1.5s ease-in-out forwards;
  animation: fade-in 1.5s ease-out forwards;
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* æ‚¬åœæ•ˆæžœå¢žå¼º */
@@ -736,3 +732,14 @@
.quantum-button:hover .quantum-pulse {
  animation: quantum-pulse 2s ease-in-out infinite;
}

/* ä¸»é¡µé—ªå…‰æŒ‰é’®æ•ˆæžœ */
@keyframes shine {
  100% {
    left: 125%;
  }
}

.animate-shine {
  animation: shine 1.5s ease-in-out;
}

 src/app/page.tsx

@@ -1,77 +1,210 @@
"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';

export default function Home() {
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [currentChatbot, setCurrentChatbot] = useState('');
  const [mounted, setMounted] = useState(false);
  const [isClient, setIsClient] = useState(false);

  const handleCardClick = (title: string, chatbotId?: string) => {
    if (chatbotId) {
      setCurrentChatbot(chatbotId);
      setIsChatOpen(true);
    }
  useEffect(() => {
    setMounted(true);
    setIsClient(true);
  }, []);
  
  // å®šä¹‰åŠ¨ç”»å˜ä½“
  const fadeInUp = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
  };
  
  const fadeInLeft = {
    hidden: { opacity: 0, x: -50 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: "easeOut" } }
  };
  
  const fadeInRight = {
    hidden: { opacity: 0, x: 50 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: "easeOut" } }
  };
  
  const fadeInScale = {
    hidden: { opacity: 0, scale: 0.95 },
    visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: "easeOut" } }
  };

  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>
    <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-32 pb-24">
          {/* æŠ€æœ¯ä¼˜åŠ¿éƒ¨åˆ† */}
          <section className="w-full py-6 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-[#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">
              {/* å·¦ä¾§ï¼šé‡å­å¯å‘算法 */}
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInLeft}
                className="relative"
              >
                <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>
          <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)}
              />
            ))}
              </motion.div>
              
              {/* å³ä¾§ï¼šæ·±åº¦å­¦ä¹ é¢„测 */}
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInRight}
                className="relative"
              >
                <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: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: false, margin: "-100px" }}
              transition={{ duration: 0.8, ease: "easeOut" }}
              className="mt-20 w-full grid grid-cols-2 md:grid-cols-4 gap-8 mb-20"
            >
              <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>
      </div>
      <ChatDialog 
        isOpen={isChatOpen} 
        onClose={() => setIsChatOpen(false)}
        chatbotId={currentChatbot}
      />
    </div>
    </main>
  );
}

 src/components/layout/ClientLayoutContent.tsx

@@ -1,76 +1,202 @@
"use client";

import { ReactNode, useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import Navbar from './Navbar';
import Image from 'next/image';

export default function ClientLayoutContent({ children }: { children: React.ReactNode }) {
  // ä½¿ç”¨å®¢æˆ·ç«¯é’©å­æ£€æŸ¥è·¯å¾„
  const pathname = usePathname();
  const isLoginPage = pathname === '/login';
  
  if (isLoginPage) {
    return <>{children}</>;
interface ClientLayoutContentProps {
  children: ReactNode;
  }
  
export default function ClientLayoutContent({ children }: ClientLayoutContentProps) {
  const [isClient, setIsClient] = useState(false);
  const [hasError, setHasError] = useState(false);
  const pathname = usePathname();
  const isLoginPage = pathname === '/login';
  const isHomePage = pathname === '/';

  useEffect(() => {
    setIsClient(true);
  }, []);

  // æ·»åŠ é”™è¯¯æ•èŽ·
  useEffect(() => {
    if (hasError) {
      console.error("渲染错误被捕获：可能是JSX结构不正确导致的水合错误");
    }
  }, [hasError]);

  // é”™è¯¯å¤„理函数
  const handleError = () => {
    setHasError(true);
  return (
    <>
      <div className="min-h-screen bg-[#0A1033] text-white p-8">
        <div className="max-w-lg mx-auto mt-20 bg-red-900/30 p-6 rounded-lg border border-red-500">
          <h2 className="text-xl font-bold text-red-400 mb-4">页面渲染错误</h2>
          <p className="text-white mb-4">页面代码中可能存在JSX结构错误，请检查标签闭合是否正确。</p>
          <p className="text-gray-300 text-sm">具体错误: å¯èƒ½æ˜¯motion.div标签未正确闭合或嵌套层级有问题</p>
        </div>
      </div>
    );
  };

  // æ­¤å‡½æ•°å¯åœ¨ç‰¹æ®Šæƒ…况下用于处理过渡
  const renderContent = () => {
    if (!isClient) {
      // æœåŠ¡å™¨ç«¯æˆ–客户端初始渲染时显示静态内容
      return (
        <div className="min-h-screen bg-[#0A1033] text-white">
          <div className="opacity-50">
            {/* é™æ€å†…容版本，无动画 */}
            {children}
          </div>
        </div>
      );
    }

    // å®¢æˆ·ç«¯æ¸²æŸ“后显示完整内容
    try {
      return (
        <div className="animate-fadeIn">
          <div className="flex flex-col min-h-screen">
      <Navbar />
      <main className="min-h-screen bg-gradient-to-b from-[var(--ai-surface)] to-white pt-16">
            <main className={`flex-1 ${isHomePage ? '' : 'bg-gradient-to-b from-[var(--ai-surface)] to-white'} pt-0 mt-0`}>
        {children}
      </main>
      <footer className="bg-gradient-to-br from-[var(--ai-primary)] to-[var(--ai-dark)] text-white py-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="mb-8 flex justify-center flex-col items-center">
            <div className="relative w-16 h-16 mb-3">
              <Image 
                src="/images/logo.jpg" 
                alt="帷幄君成Logo" 
                width={64}
                height={64}
                className="object-contain"
                priority
              />
            <footer className="relative z-20 bg-gradient-to-br from-[#0A1033] via-[#1E2B63] to-[#131C41] text-white py-10 overflow-hidden">
              {/* ç§‘技感动态背景元素 */}
              <div className="absolute inset-0 overflow-hidden pointer-events-none">
                {/* ç½‘格底纹 */}
                <div className="absolute inset-0 opacity-5" 
                  style={{ 
                    backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.3) 1px, transparent 1px)', 
                    backgroundSize: '20px 20px' 
                  }}>
            </div>
            <div className="text-xl font-bold">帷幄君成</div>
            <div className="text-sm text-gray-300 mt-1">智能物流解决方案</div>
                
                {/* æ°´å¹³å…‰çº¿ */}
                <div className="absolute top-1/2 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent transform -translate-y-1/2"></div>
                
                {/* åž‚直光线 */}
                <div className="absolute left-1/4 top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#5E72EB]/30 to-transparent"></div>
                <div className="absolute left-3/4 top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent"></div>
                
                {/* é‡å­ç²’子点 - ä½¿ç”¨æ¡ä»¶æ¸²æŸ“ */}
                {isClient && (
                  <>
                    <div className="absolute top-[20%] left-[10%] w-1 h-1 rounded-full bg-[#6ADBFF]/60 animate-pulse"></div>
                    <div className="absolute top-[70%] left-[90%] w-1.5 h-1.5 rounded-full bg-[#FF6A88]/60 animate-pulse" style={{animationDelay: '1.5s'}}></div>
                    <div className="absolute top-[40%] left-[60%] w-1 h-1 rounded-full bg-[#5E72EB]/60 animate-pulse" style={{animationDelay: '0.8s'}}></div>
                  </>
                )}
                
                {/* åº•éƒ¨æ³¢æµªçº¿ */}
                <div className="absolute bottom-0 w-full h-8 opacity-10">
                  <svg className="w-full h-full" viewBox="0 0 1200 30" preserveAspectRatio="none">
                    <path d="M0,10 Q150,20 300,10 T600,10 T900,10 T1200,10 V30 H0 Z" fill="url(#footerGradient)"></path>
                    <defs>
                      <linearGradient id="footerGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" stopColor="#6ADBFF" />
                        <stop offset="50%" stopColor="#5E72EB" />
                        <stop offset="100%" stopColor="#6ADBFF" />
                      </linearGradient>
                    </defs>
                  </svg>
          </div>
              </div>
              
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">关于我们</h3>
              <ul className="space-y-2">
                <li className="hover:text-[#F5A800] transition-colors cursor-pointer">公司介绍</li>
                <li className="hover:text-[#F5A800] transition-colors cursor-pointer">联系方式</li>
                <li className="hover:text-[#F5A800] transition-colors cursor-pointer">加入我们</li>
                  <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#6ADBFF]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(106,219,255,0.2)]">
                    <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#F5A800]">关于我们</h3>
                    <ul className="space-y-3">
                      <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
                        å…¬å¸ä»‹ç»
                      </li>
                      <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
                        è”系方式
                      </li>
                      <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
                        åŠ å…¥æˆ‘们
                      </li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">产品服务</h3>
              <ul className="space-y-2">
                <li className="hover:text-[#F5A800] transition-colors cursor-pointer">数字员工</li>
                <li className="hover:text-[#F5A800] transition-colors cursor-pointer">智能客服</li>
                <li className="hover:text-[#F5A800] transition-colors cursor-pointer">物流解决方案</li>
                  
                  <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#5E72EB]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(94,114,235,0.2)]">
                    <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#5E72EB] to-[#F5A800]">产品服务</h3>
                    <ul className="space-y-3">
                      <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
                        æ•°å­—员工
                      </li>
                      <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
                        æ™ºèƒ½å®¢æœ
                      </li>
                      <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
                        APS解决方案
                      </li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">帮助中心</h3>
              <ul className="space-y-2">
                <li className="hover:text-[#F5A800] transition-colors cursor-pointer">使用指南</li>
                <li className="hover:text-[#F5A800] transition-colors cursor-pointer">常见问题</li>
                <li className="hover:text-[#F5A800] transition-colors cursor-pointer">技术支持</li>
                  
                  <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#FF6A88]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(255,106,136,0.2)]">
                    <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#FF6A88] to-[#F5A800]">帮助中心</h3>
                    <ul className="space-y-3">
                      <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
                        ä½¿ç”¨æŒ‡å—
                      </li>
                      <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
                        å¸¸è§é—®é¢˜
                      </li>
                      <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
                        æŠ€æœ¯æ”¯æŒ
                      </li>
              </ul>
            </div>
          </div>
          <div className="mt-8 pt-8 border-t border-opacity-20 border-[#F5A800] text-center">
                
                <div className="mt-10 pt-6 border-t border-[#6ADBFF]/10 text-center relative">
                  {/* é‡å­è¿žæŽ¥ç‰¹æ•ˆ */}
                  <div className="absolute top-0 left-1/3 right-1/3 h-[1px]">
                    <div className="relative w-full h-full">
                      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent"></div>
                      <div className="absolute top-0 left-1/2 h-6 w-[1px] -translate-x-1/2 -translate-y-1/2 bg-gradient-to-b from-[#6ADBFF] to-transparent opacity-70"></div>
                    </div>
                  </div>
                  
                  {/* åº•éƒ¨è„‰å†²æŒ‡ç¤ºå™¨ - ä½¿ç”¨æ¡ä»¶æ¸²æŸ“ */}
                  {isClient ? (
            <div className="flex items-center justify-center mb-4">
              <span className="inline-block w-2 h-2 bg-[#00A0E9] rounded-full mr-2 animate-pulse"></span>
              <span className="inline-block w-2 h-2 bg-[#5D54A4] rounded-full mx-2 animate-pulse delay-300"></span>
              <span className="inline-block w-2 h-2 bg-[#F5A800] rounded-full ml-2 animate-pulse delay-500"></span>
                      <span className="inline-block w-2 h-2 bg-[#6ADBFF] rounded-full mr-3 animate-pulse"></span>
                      <span className="inline-block w-2 h-2 bg-[#5E72EB] rounded-full mx-3 animate-pulse" style={{animationDelay: '0.3s'}}></span>
                      <span className="inline-block w-2 h-2 bg-[#FF6A88] rounded-full ml-3 animate-pulse" style={{animationDelay: '0.6s'}}></span>
            </div>
            <p>© 2024 å¸·å¹„君成. All rights reserved.</p>
                  ) : (
                    <div className="h-4 mb-4"></div>
                  )}
                  <p className="text-gray-300 text-sm">© 2024 å¸·å¹„君成. All rights reserved.</p>
          </div>
        </div>
      </footer>
          </div>
        </div>
      );
    } catch (error) {
      console.error("渲染错误:", error);
      return handleError();
    }
  };

  return (
    <>
      {hasError ? handleError() : renderContent()}
    </>
  );
} 

 src/components/layout/Navbar.tsx

@@ -154,14 +154,14 @@
          {/* å¯¼èˆªèœå• - å¢žåŠ z-index确保在动效之上 */}
          <div className="hidden md:flex items-center space-x-8 relative z-20">
            <Link 
              href="/platform" 
              href="/ai-scene" 
              className="relative px-3 py-2 text-sm font-medium"
              onMouseEnter={() => setActiveMenu('platform')}
              onMouseEnter={() => setActiveMenu('ai-scene')}
              onMouseLeave={() => setActiveMenu('')}
            >
              <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'platform' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>数字员工平台</span>
              <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 === 'platform' ? 'w-full' : 'w-0'}`}></span>
                transition-all duration-300 ${activeMenu === 'ai-scene' ? 'w-full' : 'w-0'}`}></span>
            </Link>
            
            <Link 
@@ -242,11 +242,11 @@
        <div className="p-3 space-y-1 bg-gradient-to-b from-[#1E2B63] to-[#0A1033] 
          border-t border-[#6ADBFF]/10">
          <Link 
            href="/platform" 
            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>
          
          <Link