src/app/page.tsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/Card.tsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/SceneIntroDialog.tsx | ●●●●● 补丁 | 查看 | 原始文档 | 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>