hongjli
2025-04-08 d0c9d7d10f846a831228663885e015120cdf950c
主页优化
已修改3个文件
412 ■■■■ 文件已修改
src/app/page.tsx 127 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Card.tsx 92 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/SceneIntroDialog.tsx 193 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/app/page.tsx
@@ -35,6 +35,20 @@
    visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: "easeOut" } }
  };
  // 按钮出场动画
  const buttonVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: (i: number) => ({
      opacity: 1,
      y: 0,
      transition: {
        delay: i * 0.2,
        duration: 0.6,
        ease: [0.25, 0.1, 0.25, 1],
      },
    }),
  };
  return (
    <main className="relative w-full min-h-screen bg-[#0A1033] text-white overflow-hidden px-4 -mt-[1px]">
      {/* 顶部导航背景延伸层 */}
@@ -44,36 +58,91 @@
        {/* 主要内容部分 */}
        <div className="relative z-10 min-h-screen pt-32 pb-24">
          {/* 交互按钮组 - 顶部 */}
          <div className="flex justify-center gap-8 mb-20">
            <motion.button
              initial="hidden"
              whileInView="visible"
              viewport={{ once: false, margin: "-150px" }}
              variants={fadeInLeft}
              whileHover={{ scale: 1.03 }}
              whileTap={{ scale: 0.97 }}
              className="relative px-12 py-3 rounded-lg overflow-hidden group backdrop-blur-sm bg-white/5 border border-[#6ADBFF]/30 hover:border-[#6ADBFF]/50 transition-all duration-300"
            >
              <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/5 to-[#5E72EB]/5 group-hover:from-[#6ADBFF]/10 group-hover:to-[#5E72EB]/10 transition-all duration-300"></div>
              <div className="relative">
                <span className="text-white font-semibold">AI场景模拟</span>
              </div>
            </motion.button>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-6 sm:gap-8 mb-20">
            <Link href="/ai-scene">
              <motion.div
                custom={0}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-150px" }}
                variants={buttonVariants}
                whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
                className="group relative"
              >
                <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-8 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-[#6ADBFF] text-xl mr-2">⚡</span>
                  <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>
            <motion.button
              initial="hidden"
              whileInView="visible"
              viewport={{ once: false, margin: "-150px" }}
              variants={fadeInRight}
              whileHover={{ scale: 1.03 }}
              whileTap={{ scale: 0.97 }}
              className="relative px-12 py-3 rounded-lg overflow-hidden group backdrop-blur-sm bg-white/5 border border-[#FF6A88]/30 hover:border-[#FF6A88]/50 transition-all duration-300"
            >
              <div className="absolute inset-0 bg-gradient-to-r from-[#FF6A88]/5 to-[#5E72EB]/5 group-hover:from-[#FF6A88]/10 group-hover:to-[#5E72EB]/10 transition-all duration-300"></div>
              <div className="relative">
                <span className="text-white font-semibold">开始聊天</span>
              </div>
            </motion.button>
            <Link href="/chat">
              <motion.div
                custom={1}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-150px" }}
                variants={buttonVariants}
                whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
                className="group relative"
              >
                <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-8 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-[#FF6A88] text-xl mr-2">💬</span>
                  <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优势全景 - 独立区块 */}
src/components/Card.tsx
@@ -13,25 +13,83 @@
const Card = ({ title, description, imageUrl, onClick }: CardProps) => {
  return (
    <motion.div
      whileHover={{ scale: 1.02, boxShadow: '0 10px 25px -5px rgba(0, 184, 212, 0.1), 0 10px 10px -5px rgba(0, 184, 212, 0.05)' }}
      whileTap={{ scale: 0.98 }}
      className="bg-white backdrop-blur-sm bg-opacity-90 rounded-xl border border-[var(--ai-secondary)] border-opacity-20 shadow-md overflow-hidden cursor-pointer transition-all"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      whileHover={{
        y: -5,
        transition: { duration: 0.2, ease: 'easeOut' }
      }}
      whileTap={{
        y: 0,
        scale: 0.98,
        transition: { duration: 0.1 }
      }}
      className="group relative bg-white backdrop-blur-sm bg-opacity-90 rounded-xl overflow-hidden cursor-pointer"
      onClick={onClick}
    >
      <div className="relative h-48 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-tr from-[var(--ai-primary)] to-transparent opacity-10 z-0"></div>
        <Image
          src={imageUrl}
          alt={title}
          fill
          className="object-contain p-4 z-10"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
      </div>
      <div className="p-5 border-t border-[var(--ai-secondary)] border-opacity-10">
        <h3 className="text-lg font-semibold text-[var(--ai-primary)] mb-2">{title}</h3>
        <p className="text-gray-600 text-sm">{description}</p>
        <div className="mt-4 h-1 w-16 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)]"></div>
      {/* 闪光效果边框 */}
      <div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)] opacity-0 blur group-hover:opacity-70 group-hover:blur-md transition-all duration-500"></div>
      {/* 卡片内容 */}
      <div className="relative z-10 bg-white border border-[var(--ai-secondary)]/20 rounded-xl overflow-hidden shadow-lg shadow-[var(--ai-secondary)]/5 group-hover:shadow-[var(--ai-secondary)]/20 transition-all duration-300">
        {/* 图片区域 */}
        <div className="relative h-48 overflow-hidden">
          {/* 渐变遮罩 */}
          <div className="absolute inset-0 bg-gradient-to-tr from-[var(--ai-primary)]/20 to-transparent z-10"></div>
          {/* 图片 */}
          <div className="relative h-full w-full transform group-hover:scale-105 transition-transform duration-700 ease-out">
            <Image
              src={imageUrl}
              alt={title}
              fill
              className="object-contain p-4"
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            />
          </div>
          {/* 技术感装饰元素 */}
          <div className="absolute top-2 right-2 w-6 h-6 opacity-70 group-hover:opacity-100 transition-opacity duration-300">
            <div className="absolute top-0 right-0 w-full h-[1px] bg-[var(--ai-secondary)]"></div>
            <div className="absolute top-0 right-0 h-full w-[1px] bg-[var(--ai-secondary)]"></div>
          </div>
          <div className="absolute bottom-2 left-2 w-6 h-6 opacity-70 group-hover:opacity-100 transition-opacity duration-300">
            <div className="absolute bottom-0 left-0 w-full h-[1px] bg-[var(--ai-highlight)]"></div>
            <div className="absolute bottom-0 left-0 h-full w-[1px] bg-[var(--ai-highlight)]"></div>
          </div>
        </div>
        {/* 内容区域 */}
        <div className="p-5 border-t border-[var(--ai-secondary)]/10 relative overflow-hidden">
          {/* 内容背景动效 */}
          <div className="absolute -inset-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
            <div className="absolute right-0 top-0 h-20 w-20 bg-gradient-to-bl from-[var(--ai-secondary)]/5 to-transparent rounded-full blur-xl"></div>
          </div>
          {/* 标题 */}
          <h3 className="text-lg font-semibold text-[var(--ai-primary)] mb-2 relative">
            {title}
            <div className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)] group-hover:w-full transition-all duration-300 ease-out"></div>
          </h3>
          {/* 描述 */}
          <p className="text-gray-600 text-sm relative z-10">{description}</p>
          {/* 底部装饰 */}
          <div className="mt-4 flex items-center justify-between">
            <div className="h-1 w-12 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)] transform origin-left scale-x-100 group-hover:scale-x-125 transition-transform duration-300"></div>
            <motion.div
              className="text-[var(--ai-secondary)] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300"
              initial={{ x: -10 }}
              whileHover={{ x: 0 }}
            >
              了解详情 →
            </motion.div>
          </div>
        </div>
      </div>
    </motion.div>
  );
src/components/SceneIntroDialog.tsx
@@ -2,6 +2,7 @@
import { Dialog, Transition } from '@headlessui/react';
import { Fragment } from 'react';
import { motion } from 'framer-motion';
interface SceneIntroDialogProps {
  isOpen: boolean;
@@ -27,92 +28,208 @@
      <Dialog as="div" className="relative z-50" onClose={onClose}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enter="ease-out duration-500"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-out duration-200"
          leave="ease-in duration-300"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-black/70" />
          <div className="fixed inset-0 bg-black/80 backdrop-blur-sm" />
        </Transition.Child>
        
        <div className="fixed inset-0 overflow-y-auto">
          <div className="flex min-h-full items-center justify-center p-4">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-out duration-200"
              enter="ease-out duration-400"
              enterFrom="opacity-0 scale-95 -translate-y-10"
              enterTo="opacity-100 scale-100 translate-y-0"
              leave="ease-in duration-300"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-gradient-to-br from-[#1E2B63] to-[#0A1033] p-6 shadow-xl transition-all">
                {/* 科技感背景效果 */}
              <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-gradient-to-br from-[#131C41] to-[#0A1033] p-6 shadow-[0_0_50px_rgba(106,219,255,0.2)] transition-all">
                {/* 量子科技感背景效果 */}
                <div className="absolute inset-0 overflow-hidden pointer-events-none">
                  {/* 网格背景 */}
                  <div className="absolute inset-0 opacity-10" 
                    style={{ 
                      backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.3) 1px, transparent 1px)',
                      backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.5) 1px, transparent 1px)',
                      backgroundSize: '20px 20px' 
                    }}>
                  </div>
                  <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
                  <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
                  {/* 扫描线动画 */}
                  <motion.div
                    className="absolute left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#6ADBFF]/60 to-transparent"
                    initial={{ top: "-20%" }}
                    animate={{
                      top: ["0%", "100%"],
                    }}
                    transition={{
                      repeat: Infinity,
                      duration: 3,
                      ease: "linear",
                      repeatType: "loop"
                    }}
                  />
                  {/* 边框装饰 */}
                  <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent"></div>
                  <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent"></div>
                  {/* 角落装饰 */}
                  <div className="absolute top-0 left-0 w-16 h-16">
                    <div className="absolute top-0 left-0 w-8 h-[1px] bg-[#6ADBFF]/70"></div>
                    <div className="absolute top-0 left-0 w-[1px] h-8 bg-[#6ADBFF]/70"></div>
                  </div>
                  <div className="absolute top-0 right-0 w-16 h-16">
                    <div className="absolute top-0 right-0 w-8 h-[1px] bg-[#6ADBFF]/70"></div>
                    <div className="absolute top-0 right-0 w-[1px] h-8 bg-[#6ADBFF]/70"></div>
                  </div>
                  <div className="absolute bottom-0 left-0 w-16 h-16">
                    <div className="absolute bottom-0 left-0 w-8 h-[1px] bg-[#6ADBFF]/70"></div>
                    <div className="absolute bottom-0 left-0 w-[1px] h-8 bg-[#6ADBFF]/70"></div>
                  </div>
                  <div className="absolute bottom-0 right-0 w-16 h-16">
                    <div className="absolute bottom-0 right-0 w-8 h-[1px] bg-[#6ADBFF]/70"></div>
                    <div className="absolute bottom-0 right-0 w-[1px] h-8 bg-[#6ADBFF]/70"></div>
                  </div>
                </div>
                <div className="relative">
                  {/* 标题 */}
                  <Dialog.Title className="text-2xl font-bold text-white mb-4">
                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB]">
                      {scene.title}
                    </span>
                  </Dialog.Title>
                  <motion.div
                    initial={{ opacity: 0, y: -10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.2 }}
                  >
                    <Dialog.Title className="text-2xl font-bold text-white mb-4 flex items-center">
                      <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB]">
                        {scene.title}
                      </span>
                      <motion.span
                        className="ml-2 inline-block w-2 h-2 rounded-full bg-[#6ADBFF]"
                        animate={{
                          scale: [1, 1.5, 1],
                          opacity: [0.7, 1, 0.7]
                        }}
                        transition={{
                          duration: 2,
                          repeat: Infinity,
                          ease: "easeInOut"
                        }}
                      />
                    </Dialog.Title>
                  </motion.div>
                  {/* 场景图片 */}
                  <div className="relative h-48 mb-6 rounded-lg overflow-hidden">
                  <motion.div
                    className="relative h-48 mb-6 rounded-lg overflow-hidden"
                    initial={{ opacity: 0, scale: 0.95 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.5, delay: 0.3 }}
                  >
                    <div className="absolute inset-0 bg-gradient-to-t from-[#0A1033]/80 to-transparent z-10"></div>
                    <img
                      src={scene.imageUrl}
                      alt={scene.title}
                      className="w-full h-full object-cover"
                      className="w-full h-full object-cover transform scale-100 hover:scale-105 transition-transform duration-700 ease-out"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-[#0A1033]/80 to-transparent"></div>
                  </div>
                    {/* 装饰性科技感元素 */}
                    <div className="absolute top-3 right-3 w-8 h-8 border-t-2 border-r-2 border-[#6ADBFF]/70 opacity-70"></div>
                    <div className="absolute bottom-3 left-3 w-8 h-8 border-b-2 border-l-2 border-[#6ADBFF]/70 opacity-70"></div>
                  </motion.div>
                  {/* 场景背景 */}
                  <div className="mb-6">
                    <h3 className="text-lg font-semibold text-[#6ADBFF] mb-2">场景背景</h3>
                    <p className="text-gray-300 leading-relaxed">
                  <motion.div
                    className="mb-6"
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.5, delay: 0.4 }}
                  >
                    <h3 className="text-lg font-semibold text-[#6ADBFF] mb-2 flex items-center">
                      <div className="w-1 h-4 bg-[#6ADBFF] mr-2"></div>
                      场景背景
                    </h3>
                    <p className="text-gray-300 leading-relaxed ml-3 pl-2 border-l border-[#6ADBFF]/30">
                      {scene.background || scene.description}
                    </p>
                  </div>
                  </motion.div>
                  {/* 使用说明 */}
                  <div className="mb-8">
                    <h3 className="text-lg font-semibold text-[#6ADBFF] mb-2">使用说明</h3>
                    <p className="text-gray-300 leading-relaxed">
                  <motion.div
                    className="mb-8"
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.5, delay: 0.5 }}
                  >
                    <h3 className="text-lg font-semibold text-[#6ADBFF] mb-2 flex items-center">
                      <div className="w-1 h-4 bg-[#6ADBFF] mr-2"></div>
                      使用说明
                    </h3>
                    <p className="text-gray-300 leading-relaxed ml-3 pl-2 border-l border-[#6ADBFF]/30">
                      {scene.instructions || '通过自然语言对话的方式,描述您的具体需求,AI助手将为您提供专业的解决方案。'}
                    </p>
                  </div>
                  </motion.div>
                  {/* 按钮组 */}
                  <div className="flex justify-end gap-4">
                  <motion.div
                    className="flex justify-end gap-4"
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: 0.6 }}
                  >
                    <button
                      onClick={onClose}
                      className="px-4 py-2 text-sm font-medium text-gray-300 hover:text-white transition-colors"
                      className="px-4 py-2 text-sm font-medium text-gray-300 hover:text-white transition-colors relative overflow-hidden group"
                    >
                      关闭
                      <span className="relative z-10">关闭</span>
                      <span className="absolute bottom-0 left-0 right-0 h-[1px] bg-gray-300/30 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
                    </button>
                    <button
                      onClick={onStartChat}
                      className="relative px-6 py-2 rounded-lg overflow-hidden group backdrop-blur-sm bg-white/5 border border-[#6ADBFF]/30 hover:border-[#6ADBFF]/50 transition-all duration-300"
                      className="group relative"
                    >
                      <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/5 to-[#5E72EB]/5 group-hover:from-[#6ADBFF]/10 group-hover:to-[#5E72EB]/10 transition-all duration-300"></div>
                      <span className="relative text-white group-hover:text-[#6ADBFF] transition-colors duration-300">
                        开始使用
                      </span>
                      <div className="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB] opacity-60 blur group-hover:opacity-100 transition-all duration-300"></div>
                      <div className="relative px-6 py-2 rounded-lg bg-[#131C41] text-white group-hover:text-[#6ADBFF] transition-colors duration-300 flex items-center gap-2">
                        <span>开始使用</span>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                        </svg>
                        {/* 粒子效果 */}
                        <div className="absolute inset-0 overflow-hidden rounded-lg pointer-events-none">
                          {[...Array(3)].map((_, i) => (
                            <motion.div
                              key={i}
                              className="absolute w-1 h-1 rounded-full bg-[#6ADBFF]"
                              initial={{
                                x: "0%",
                                y: "0%",
                                opacity: 0
                              }}
                              animate={{
                                x: ["0%", `${Math.random() * 100}%`, "100%"],
                                y: ["0%", `${Math.random() * 100}%`, "100%"],
                                opacity: [0, 0.8, 0]
                              }}
                              transition={{
                                duration: 1.5 + Math.random(),
                                repeat: Infinity,
                                repeatType: "loop",
                                ease: "linear",
                                delay: i * 0.2
                              }}
                            />
                          ))}
                        </div>
                      </div>
                    </button>
                  </div>
                  </motion.div>
                </div>
              </Dialog.Panel>
            </Transition.Child>