feat: 工具也

src/layouts/Navbar/components/NavBarItem/NavBarItem.tsx

 import React from 'react'
 import { motion } from 'framer-motion'
 import { Button, Tooltip } from '@nextui-org/react'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { NavBarDivider } from '../NavBarDivider'
 import styles from './NavBarItem.module.less'
 import Logo from '@/assets/svg/logo.svg?react'
@@ -15,6 +15,7 @@ interface NavBarItemProps {
 }
 export const NavBarItem: React.FC<NavBarItemProps> = ({ isHistoryVisible, onClick, icon, label, type }) => {
   const navigate = useNavigate()
+  const location = useLocation()
 
   const handleClickLogo = () => {
     navigate('/')
@@ -36,7 +37,15 @@ export const NavBarItem: React.FC<NavBarItemProps> = ({ isHistoryVisible, onClic
   }
 
   const handleActive = () => {
-    return type === 'history' && isHistoryVisible
+    if (type === 'history' && isHistoryVisible) {
+      return true
+    }
+    if (type === 'tools' && location.pathname === '/tools') {
+      return true
+    }
+    if (type === 'collect' && location.pathname === '/collect') {
+      return true
+    }
   }
 
   return (

src/pages/Tools/Tools.module.less

+.toolsPage {
+  width: 100%;
+  height: 100%;
+}

src/pages/Tools/Tools.module.less.d.ts

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

src/pages/Tools/Tools.tsx

+import { Virtuoso } from 'react-virtuoso'
+import { motion } from 'framer-motion'
+import styles from './Tools.module.less'
+import { Slogan } from './components/Slogan/Slogan'
+import { GradientBackground } from '@/components/GradientBackground'
+
+function getAnimationProps(delay: number) {
+  return {
+    variants: {
+      hidden: {
+        opacity: 0,
+        y: 50,
+        scale: 0.9,
+        rotateX: -6,
+      },
+      visible: {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        rotateX: 0,
+        transition: {
+          duration: 0.4,
+          delay: delay * 0.1,
+          ease: [0.25, 0.1, 0.25, 1],
+        },
+      },
+    },
+    initial: 'hidden',
+    animate: 'visible',
+  }
+}
+
 export const Tools: React.FC = () => {
   return (
+    <div className={styles.toolsPage}>
+      <GradientBackground />
+      <div className="h-full w-full">
+        <div className="box flex flex-col h-full w-full">
+          <div className="flex-1">
+            <Virtuoso
+              style={{ height: '100%' }}
+              totalCount={1}
+              itemContent={() => (
+                <div className="px-[24px] pb-[24px] pt-[42px] sm:pt-[80px] lg:pt-[180px] sm:px-0">
+                  <Slogan />
                   <div>
-      工具
+                    <div className="max-w-[1000px] flex mx-auto mt-[64px] text-18px text-[#5AA9D0] font-light">全部工具</div>
+                    <div className="max-w-[1000px] mx-auto gap-[20px] flex flex-col flex-wrap  mt-[22px] sm:flex-row">
+                      <motion.div className=" rounded-[20px] bg-[#fff] flex-1 h-[100px] p-[24px]" {...getAnimationProps(4)}>工具1</motion.div>
+                      <motion.div className=" rounded-[20px] bg-[#fff] flex-1 h-[100px] p-[24px]" {...getAnimationProps(5)}>工具2</motion.div>
+                      <motion.div className=" rounded-[20px] bg-[#fff] flex-1 h-[100px] p-[24px]" {...getAnimationProps(6)}>工具3</motion.div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            />
+          </div>
+        </div>
+      </div>
     </div>
   )
 }

src/pages/Tools/components/Slogan/Slogan.tsx

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