refactor: 优化导航栏布局和命名
UI优化: - 简化导航栏菜单名称,提升用户体验 * 项目管理 项目 * 模特管理 模特 * 模板管理 模板 * 素材绑定 素材 * AI分类设置 分类 * 服装搭配 穿搭 * 便捷工具 工具 布局调整: - 优化导航栏间距和内边距,更加紧凑 - 调整主容器滚动区域到main元素 - 减少导航项之间的间距(space-x-4 space-x-2) - 优化内边距(px-3 px-2, ml-10 ml-4) 代码清理: - 移除未使用的CogIcon导入 - 移除应用设置相关的导航项 这些调整让导航栏更加简洁明了,提升了界面的整体美观度
This commit is contained in:
parent
230436240d
commit
63014471b4
|
|
@ -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 />} />
|
||||||
|
|
|
||||||
|
|
@ -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'
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue