refactor: 简化导航菜单结构和清理未使用的导入
改进: - 移除未使用的图标导入 (ChartBarIcon, RectangleStackIcon, PlayIcon, ServerIcon) - 简化工具菜单结构,移除子菜单 - 将工具菜单改为直接链接到 /tools 页面 - 优化代码格式和换行 用户体验: - 简化导航结构,减少点击层级 - 更直观的工具访问方式
This commit is contained in:
parent
78d9296155
commit
c37fff0d09
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue