app/components/news/header/TopNav.tsx

@@ -1,6 +1,6 @@
 import { Search } from 'lucide-react';
-import React, { useState,useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
-import { Button } from '@/ui/button';
+
 interface MenuItem {
   label: string;
   key: string;
@@ -29,15 +29,15 @@ export function TopNav({
   const [internalActiveKey, setInternalActiveKey] = useState('home');
   const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
   const [searchKeyword, setSearchKeyword] = useState('');
-  // const [activeIndex, setActiveIndex] = useState(0);
+  const [activeIndex, setActiveIndex] = useState(0);
-  // const [prevIndex, setPrevIndex] = useState(0);
+  const [prevIndex, setPrevIndex] = useState(0);
 
   // 监听激活项变化，更新索引和动画方向
-  // useEffect(() => {
+  useEffect(() => {
-  //   const currentIndex = menuItems.findIndex(item => item.key === currentActiveKey);
+    const currentIndex = menuItems.findIndex(item => item.key === currentActiveKey);
-  //   setPrevIndex(activeIndex);
+    setPrevIndex(activeIndex);
-  //   setActiveIndex(currentIndex);
+    setActiveIndex(currentIndex);
-  // }, [currentActiveKey, menuItems, activeIndex]);
+  }, [currentActiveKey, menuItems, activeIndex]);
 
   const handleSearchSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -52,53 +52,61 @@ export function TopNav({
   };
 
   return (
-    // 将组件宽度调整为1514px，并保持居中
+    <div className="h-20 flex items-center justify-center px-8 bg-white">
-    <div className="h-20 w-[1514px] mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#1f79bf]">
       {/* 搜索框与导航菜单组合 */}
-      <div className="flex items-center justify-start w-full gap-5">
+      <div className="flex items-center space-x-4">
         {/* 搜索框 */}
-        
+        <form onSubmit={handleSearchSubmit} className="relative">
-        <div className="relative overflow-hidden bg-gray-100 ">
+          <div className="relative">
-          <Button variant="default" className="absolute rounded-none right-0 top-1/2 transform -translate-y-1/2 bg-[#1f79bf] hover:bg-[#1a68a0] text-white border-0 "
+            <input
-                 onClick={handleSearchSubmit}
+              type="text"
-                 
+              value={searchKeyword}
-                 >
+              onChange={(e) => setSearchKeyword(e.target.value)}
-            <Search className="w-5 h-5" />
+              placeholder="搜索..."
-          </Button>
+              className="pl-10 pr-4 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm"
+            />
+            <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
+              <Search className="w-5 h-5" />
+            </span>
+          </div>
+        </form>
 
-          <input type="text" 
+        {/* 导航菜单 */}
-                 placeholder='请输入关键词'
+        <ul className="flex space-x-8 relative">
-                 value={searchKeyword}
+          {/* 滑动背景层 */}
-                 onChange={(e) => setSearchKeyword(e.target.value)}
+          <div 
-                className="pl-5 pr-4 py-2 text-sm h-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm" />
+            className="absolute inset-y-0 z-0 transition-all duration-500 ease-out"
-        </div>
+            style={{
- 
+              left: `${activeIndex * (100 / menuItems.length)}%`,
-         
+              width: `${100 / menuItems.length}%`,
-          {/* 导航菜单 */}
+              clipPath: 'polygon(0% 0%, 80% 0%, 100% 100%, 20% 100%)', // 向左倾斜的平行四边形
-        <ul className="flex space-x-20 relative">
+              background: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
-          {menuItems.map((item) => {
+              transform: `translateX(${(prevIndex - activeIndex) * 100}%)`,
+            }}
+          />
+          
+          {menuItems.map((item, index) => {
             const isActive = currentActiveKey === item.key;
             return (
-              <li key={item.key} className="relative">
+              <li 
+                key={item.key} 
+                className="relative z-10"
+                style={{ width: `${100 / menuItems.length}%` }}
+              >
                 <button
                   onClick={() => handleItemClick(item)}
-                  className={`px-4 py-2 text-2xl font-extralight transition-all duration-500 relative z-10 ${
+                  className={`w-full h-full px-4 py-2 text-2xl transition-all duration-300 ${
-                    isActive ? 'text-white' : 'text-gray-600 hover:font-bold'
+                    isActive
+                      ? 'text-white' // 激活状态文字颜色
+                      : 'text-gray-600 hover:text-black cursor-pointer' // 非激活状态样式
                   }`}
                 >
-                  {/* 激活状态背景层 */}
+                  {item.label}
-                  {isActive && (
-                    <span className="absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-700 transform skew-x-12  rounded-none z-0"></span>
-                  )}
-                  <span className="relative z-20">{item.label}</span>
                 </button>
               </li>
             );
           })}
         </ul>
-
-
-
       </div>
     </div>
   );