feat: 样式

src/components/GradientsBall/GradientsBall.module.less

+.gradientsBallContainer {
+  height: 44px;
+  width: 110px;
+  position: absolute;
+  z-index: -1;
+}
+.g1 {
+  width: 72px;
+  height: 72px;
+  background: linear-gradient( 142deg, #B4F4FF 0%, rgba(230,246,254,0) 100%);
+  filter: blur(20px);
+  position: absolute;
+  left: -36px;
+  top: -36px;
+}
+.g2 {
+  width: 16px;
+  height: 16px;
+  background: #CBC2FF;
+  filter: blur(6px);
+  right: -56px;
+  top: -24px;
+  position: absolute;
+}
+.g3 {
+  width: 6px;
+  height: 6px;
+  background: #29B6FD;
+  filter: blur(4px);
+  right: 46px;
+  bottom: -26px;
+  position: absolute;
+}

src/components/GradientsBall/GradientsBall.module.less.d.ts

+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  g1: string
+  g2: string
+  g3: string
+  gradientsBallContainer: string
+}
+declare const cssExports: CssExports
+export default cssExports

src/components/GradientsBall/GradientsBall.tsx

+import React from 'react'
+import { motion } from 'framer-motion'
+import styles from './GradientsBall.module.less'
+
+export const GradientsBall: React.FC = () => {
+  const balls = [
+    { id: 'g1' },
+    { id: 'g2' },
+    { id: 'g3' },
+  ]
+
+  return (
+    <div className={styles.gradientsBallContainer}>
+      {balls.map(ball => (
+        <motion.div
+          key={ball.id}
+          className={(styles as any)[ball.id]}
+        >
+        </motion.div>
+      ))}
+    </div>
+  )
+}

src/layouts/MainLayout/MainLayout.tsx

@@ -10,15 +10,30 @@ interface MainLayoutProps {
 }
 
 export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
-  const [isNavCollapsed, toggleNav] = useToggle(true)
-
+  const [isHistoryVisible, toggleHistoryVisible] = useToggle(false)
+  const contentVariants = {
+    expanded: {
+      width: '90px',
+      transition: { type: 'spring', stiffness: 300, damping: 30 },
+    },
+    shrunk: {
+      width: '340px',
+      transition: { type: 'spring', stiffness: 300, damping: 30 },
+    },
+  }
   return (
     <motion.main className={styles.layoutMain}>
-      <div className="w-90px h-full pl-[12px] flex items-center">
-        <Navbar isCollapsed={isNavCollapsed} onToggle={toggleNav} />
-        <HistoryBar isVisible={isNavCollapsed} />
-      </div>
-      <motion.div className={styles.layoutContent}>
+      <motion.div
+        animate={isHistoryVisible ? 'shrunk' : 'expanded'}
+        variants={contentVariants}
+        className={`h-full pl-[12px] flex items-center ${isHistoryVisible ? 'w-[340px]' : 'w-[90px]'}`}
+      >
+        <Navbar isCollapsed={isHistoryVisible} onToggle={toggleHistoryVisible} />
+        <HistoryBar isVisible={isHistoryVisible} />
+      </motion.div>
+      <motion.div
+        className={styles.layoutContent}
+      >
         {children}
       </motion.div>
     </motion.main>

src/pages/Home/components/Slogan/Slogan.tsx

 import type React from 'react'
 import TextLogo from '@/assets/svg/textLogo.svg?react'
 import GradualSpacing from '@/components/GradualSpacing'
+import { GradientsBall } from '@/components/GradientsBall/GradientsBall'
 
 export const Slogan: React.FC = () => {
   return (
     <div className="flex flex-col items-center box-border">
+      <GradientsBall />
       <TextLogo className="text-[12px]" />
       <GradualSpacing text="晓得解惑，让沟通更智能" className="mt-[36px] text-[#333] text-[28px] font-medium" />
       <h3 className="text-center text-[18px] text-[#5AA9D0] font-light mt-[16px]">知晓市场脉搏，引领行业潮流，晓得AI助手全方位为您保驾护航</h3>

src/pages/Home/components/WelcomeWord/WelcomeWord.tsx

@@ -19,7 +19,7 @@ const BotEye: React.FC = () => {
   useEffect(() => {
     const blinkInterval = setInterval(() => {
       blink()
-    }, 4000)
+    }, 3000)
 
     return () => clearInterval(blinkInterval)
   }, [])