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 />
{/* 可滚动的主要内容区域 */}
<main className="flex-1 ">
<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">
<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">
<Routes>
<Route path="/" element={<ProjectList />} />
<Route path="/project/:id" element={<ProjectDetails />} />

View File

@ -8,7 +8,6 @@ import {
LinkIcon,
WrenchScrewdriverIcon,
SparklesIcon,
CogIcon
} from '@heroicons/react/24/outline';
const Navigation: React.FC = () => {
@ -16,52 +15,46 @@ const Navigation: React.FC = () => {
const navItems = [
{
name: '项目管理',
name: '项目',
href: '/',
icon: FolderIcon,
description: '管理项目和素材'
},
{
name: '模特管理',
name: '模特',
href: '/models',
icon: UserGroupIcon,
description: '管理模特信息'
},
{
name: '模板管理',
name: '模板',
href: '/templates',
icon: DocumentDuplicateIcon,
description: '管理剪映模板'
},
{
name: '素材绑定',
name: '素材',
href: '/material-model-binding',
icon: LinkIcon,
description: '管理素材与模特的绑定关系'
},
{
name: 'AI分类设置',
name: '分类',
href: '/ai-classification-settings',
icon: CpuChipIcon,
description: '管理AI视频分类规则'
},
{
name: '服装搭配',
name: '穿搭',
href: '/fashion-chat',
icon: SparklesIcon,
description: 'AI智能服装搭配推荐'
},
{
name: '便捷工具',
name: '工具',
href: '/tools',
icon: WrenchScrewdriverIcon,
description: 'AI检索图片/数据清洗工具'
},
{
name: '应用设置',
href: '/settings',
icon: CogIcon,
description: '屏幕适配和应用配置'
}
];
@ -74,7 +67,7 @@ const Navigation: React.FC = () => {
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">
<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">
{/* 增强的 Logo */}
<div className="flex items-center">
@ -89,7 +82,7 @@ const Navigation: React.FC = () => {
</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) => {
const Icon = item.icon;
const active = isActive(item.href);
@ -98,7 +91,7 @@ const Navigation: React.FC = () => {
<Link
key={item.name}
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
? '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'