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 />
|
||||
|
||||
{/* 可滚动的主要内容区域 */}
|
||||
<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 />} />
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Reference in New Issue