refactor: 优化导航栏布局和命名

UI优化:
- 简化导航栏菜单名称,提升用户体验
  * 项目管理  项目
  * 模特管理  模特
  * 模板管理  模板
  * 素材绑定  素材
  * AI分类设置  分类
  * 服装搭配  穿搭
  * 便捷工具  工具

布局调整:
- 优化导航栏间距和内边距,更加紧凑
- 调整主容器滚动区域到main元素
- 减少导航项之间的间距(space-x-4  space-x-2)
- 优化内边距(px-3  px-2, ml-10  ml-4)

代码清理:
- 移除未使用的CogIcon导入
- 移除应用设置相关的导航项

这些调整让导航栏更加简洁明了,提升了界面的整体美观度
This commit is contained in:
imeepos 2025-07-23 21:04:23 +08:00
parent 230436240d
commit 63014471b4
2 changed files with 12 additions and 19 deletions

View File

@ -98,8 +98,8 @@ function App() {
<Navigation /> <Navigation />
{/* 可滚动的主要内容区域 */} {/* 可滚动的主要内容区域 */}
<main className="flex-1 "> <main className="flex-1 overflow-y-auto smooth-scroll">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 max-w-full max-h-full overflow-y-auto smooth-scroll"> <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 max-w-full">
<Routes> <Routes>
<Route path="/" element={<ProjectList />} /> <Route path="/" element={<ProjectList />} />
<Route path="/project/:id" element={<ProjectDetails />} /> <Route path="/project/:id" element={<ProjectDetails />} />

View File

@ -8,7 +8,6 @@ import {
LinkIcon, LinkIcon,
WrenchScrewdriverIcon, WrenchScrewdriverIcon,
SparklesIcon, SparklesIcon,
CogIcon
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
const Navigation: React.FC = () => { const Navigation: React.FC = () => {
@ -16,52 +15,46 @@ const Navigation: React.FC = () => {
const navItems = [ const navItems = [
{ {
name: '项目管理', name: '项目',
href: '/', href: '/',
icon: FolderIcon, icon: FolderIcon,
description: '管理项目和素材' description: '管理项目和素材'
}, },
{ {
name: '模特管理', name: '模特',
href: '/models', href: '/models',
icon: UserGroupIcon, icon: UserGroupIcon,
description: '管理模特信息' description: '管理模特信息'
}, },
{ {
name: '模板管理', name: '模板',
href: '/templates', href: '/templates',
icon: DocumentDuplicateIcon, icon: DocumentDuplicateIcon,
description: '管理剪映模板' description: '管理剪映模板'
}, },
{ {
name: '素材绑定', name: '素材',
href: '/material-model-binding', href: '/material-model-binding',
icon: LinkIcon, icon: LinkIcon,
description: '管理素材与模特的绑定关系' description: '管理素材与模特的绑定关系'
}, },
{ {
name: 'AI分类设置', name: '分类',
href: '/ai-classification-settings', href: '/ai-classification-settings',
icon: CpuChipIcon, icon: CpuChipIcon,
description: '管理AI视频分类规则' description: '管理AI视频分类规则'
}, },
{ {
name: '服装搭配', name: '穿搭',
href: '/fashion-chat', href: '/fashion-chat',
icon: SparklesIcon, icon: SparklesIcon,
description: 'AI智能服装搭配推荐' description: 'AI智能服装搭配推荐'
}, },
{ {
name: '便捷工具', name: '工具',
href: '/tools', href: '/tools',
icon: WrenchScrewdriverIcon, icon: WrenchScrewdriverIcon,
description: 'AI检索图片/数据清洗工具' description: 'AI检索图片/数据清洗工具'
},
{
name: '应用设置',
href: '/settings',
icon: CogIcon,
description: '屏幕适配和应用配置'
} }
]; ];
@ -74,7 +67,7 @@ const Navigation: React.FC = () => {
return ( return (
<nav className="bg-white/95 backdrop-blur-sm shadow-sm border-b border-gray-200/50 sticky top-0 z-50 flex-shrink-0"> <nav className="bg-white/95 backdrop-blur-sm shadow-sm border-b border-gray-200/50 sticky top-0 z-50 flex-shrink-0">
<div className="px-4 sm:px-6 lg:px-8"> <div className="px-4 sm:px-2 lg:px-4">
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
{/* 增强的 Logo */} {/* 增强的 Logo */}
<div className="flex items-center"> <div className="flex items-center">
@ -89,7 +82,7 @@ const Navigation: React.FC = () => {
</div> </div>
<div> <div>
<div className="ml-10 flex items-baseline space-x-4"> <div className="ml-4 flex items-baseline space-x-2">
{navItems.map((item) => { {navItems.map((item) => {
const Icon = item.icon; const Icon = item.icon;
const active = isActive(item.href); const active = isActive(item.href);
@ -98,7 +91,7 @@ const Navigation: React.FC = () => {
<Link <Link
key={item.name} key={item.name}
to={item.href} to={item.href}
className={`group flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 relative overflow-hidden ${ className={`group flex items-center px-2 py-2 rounded-lg text-sm font-medium transition-all duration-200 relative overflow-hidden ${
active active
? 'bg-gradient-to-r from-primary-100 to-primary-200 text-primary-700 shadow-sm' ? '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' : 'text-gray-600 hover:text-gray-900 hover:bg-gradient-to-r hover:from-gray-50 hover:to-gray-100'