From 90b3b6329fec3205b845198ca6dc539dcde186c8 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期一, 16 六月 2025 17:12:20 +0800
Subject: [PATCH] 页面调整优化
---
src/app/page.tsx | 493 ++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 437 insertions(+), 56 deletions(-)
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a9101b4..735bd5f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,70 +1,451 @@
"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">
- <div className="max-w-7xl mx-auto">
- <h1 className="text-2xl font-bold text-[#2F3C7E] mb-6">鍦烘櫙妯℃嫙</h1>
- <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 items-center justify-center gap-6 mb-20">
+ <a
+ href="/ai-scene"
+ className="no-flash-link"
+ onClick={(e) => {
+ e.preventDefault();
+ document.body.classList.add('page-transitioning');
+ setTimeout(() => {
+ window.location.href = '/ai-scene';
+ }, 100);
+ }}
+ >
+ <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 cursor-pointer"
+ >
+ <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(3)].map((_, i) => (
+ <motion.div
+ key={i}
+ className="absolute rounded-full border border-[#6ADBFF]/20"
+ style={{
+ left: "50%",
+ top: "50%",
+ width: "10px",
+ height: "10px",
+ }}
+ initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.5 }}
+ animate={{
+ scale: [0, 8],
+ opacity: [0.5, 0]
+ }}
+ transition={{
+ duration: 2,
+ repeat: Infinity,
+ delay: i * 0.6
+ }}
+ />
+ ))}
+ </div>
+ </div>
+ </motion.div>
+ </a>
+
+ <a
+ href="/chat"
+ className="no-flash-link"
+ onClick={(e) => {
+ e.preventDefault();
+ document.body.classList.add('page-transitioning');
+ const token = localStorage.getItem('token');
+ const targetUrl = token ? '/chat' : '/login';
+ setTimeout(() => {
+ window.location.href = targetUrl;
+ }, 100);
+ }}
+ >
+ <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 cursor-pointer"
+ >
+ <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>
+ </a>
</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>
);
}
--
Gitblit v1.9.3