refactor: 简化导航菜单结构和清理未使用的导入

改进:
- 移除未使用的图标导入 (ChartBarIcon, RectangleStackIcon, PlayIcon, ServerIcon)
- 简化工具菜单结构,移除子菜单
- 将工具菜单改为直接链接到 /tools 页面
- 优化代码格式和换行

 用户体验:
- 简化导航结构,减少点击层级
- 更直观的工具访问方式
This commit is contained in:
imeepos 2025-08-14 15:19:51 +08:00
parent 78d9296155
commit c37fff0d09
1 changed files with 16 additions and 39 deletions

View File

@ -8,10 +8,7 @@ import {
WrenchScrewdriverIcon,
SparklesIcon,
ChevronDownIcon,
ChartBarIcon,
RectangleStackIcon,
} from '@heroicons/react/24/outline';
import { PlayIcon, ServerIcon } from 'lucide-react';
// 导航项类型定义
interface NavItem {
@ -75,21 +72,8 @@ const Navigation: React.FC = () => {
{
name: '工具',
icon: WrenchScrewdriverIcon,
description: 'AI检索图片/数据清洗工具',
children: [
{
name: '工具中心',
href: '/tools',
icon: WrenchScrewdriverIcon,
description: 'AI检索图片/数据清洗工具'
},
{
name: 'TVAI FFmpeg 命令生成器',
href: '/tools/command-generator',
icon: CpuChipIcon,
description: '生成 Topaz Video AI FFmpeg 命令'
}
]
href: '/tools',
description: 'AI检索图片/数据清洗工具'
}
];
@ -152,23 +136,20 @@ const Navigation: React.FC = () => {
<div key={item.name} className="relative">
<button
onClick={() => toggleDropdown(item.name)}
className={`group flex items-center px-2 py-2 rounded-lg text-sm font-medium transition-all duration-200 relative overflow-hidden ${
hasActive
className={`group flex items-center px-2 py-2 rounded-lg text-sm font-medium transition-all duration-200 relative overflow-hidden ${hasActive
? 'bg-gradient-to-r from-primary-100 to-primary-200 text-primary-700 shadow-sm'
: 'text-gray-600 hover:text-gray-900 hover:bg-gradient-to-r hover:from-gray-50 hover:to-gray-100'
}`}
}`}
title={item.description}
>
{hasActive && (
<div className="absolute inset-0 bg-gradient-to-r from-primary-500/10 to-primary-600/10"></div>
)}
<Icon className={`mr-2 h-5 w-5 relative z-10 transition-all duration-200 ${
hasActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600 group-hover:scale-110'
}`} />
<Icon className={`mr-2 h-5 w-5 relative z-10 transition-all duration-200 ${hasActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600 group-hover:scale-110'
}`} />
<span className="relative z-10">{item.name}</span>
<ChevronDownIcon className={`ml-1 h-4 w-4 relative z-10 transition-transform duration-200 ${
isOpen ? 'rotate-180' : ''
} ${hasActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600'}`} />
<ChevronDownIcon className={`ml-1 h-4 w-4 relative z-10 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''
} ${hasActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600'}`} />
</button>
{/* 下拉菜单 */}
@ -182,17 +163,15 @@ const Navigation: React.FC = () => {
<Link
key={child.name}
to={child.href || '#'}
className={`group flex items-center px-4 py-2 text-sm transition-all duration-200 ${
childActive
className={`group flex items-center px-4 py-2 text-sm transition-all duration-200 ${childActive
? 'bg-primary-50 text-primary-700'
: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
}`}
}`}
title={child.description}
onClick={() => setOpenDropdown(null)}
>
<ChildIcon className={`mr-3 h-4 w-4 transition-all duration-200 ${
childActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600'
}`} />
<ChildIcon className={`mr-3 h-4 w-4 transition-all duration-200 ${childActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600'
}`} />
<div>
<div className="font-medium">{child.name}</div>
<div className="text-xs text-gray-500 mt-0.5">{child.description}</div>
@ -213,19 +192,17 @@ const Navigation: React.FC = () => {
<Link
key={item.name}
to={item.href || '#'}
className={`group flex items-center px-2 py-2 rounded-lg text-sm font-medium transition-all duration-200 relative overflow-hidden ${
active
className={`group flex items-center px-2 py-2 rounded-lg text-sm font-medium transition-all duration-200 relative overflow-hidden ${active
? 'bg-gradient-to-r from-primary-100 to-primary-200 text-primary-700 shadow-sm'
: 'text-gray-600 hover:text-gray-900 hover:bg-gradient-to-r hover:from-gray-50 hover:to-gray-100'
}`}
}`}
title={item.description}
>
{active && (
<div className="absolute inset-0 bg-gradient-to-r from-primary-500/10 to-primary-600/10"></div>
)}
<Icon className={`mr-2 h-5 w-5 relative z-10 transition-all duration-200 ${
active ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600 group-hover:scale-110'
}`} />
<Icon className={`mr-2 h-5 w-5 relative z-10 transition-all duration-200 ${active ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600 group-hover:scale-110'
}`} />
<span className="relative z-10">{item.name}</span>
</Link>
);