实现顶部导航栏布局系统
- 重构布局架构：移除侧边栏，采用顶部导航设计 - 实现 MainLayout 主布局组件 - 实现 Header 顶部导航栏（Logo + 水平菜单 + 用户功能区） - 实现 Footer 页脚组件 - 导航菜单包含：仪表盘、上传图片、图片库、链接管理、图片工具、存储配置、统计分析
This commit is contained in:
Leo
parent
13e2bc9637
commit
0416f58b3d
36
src/layouts/MainLayout/Footer.tsx
Normal file
36
src/layouts/MainLayout/Footer.tsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Layout } from 'antd';
|
||||||
|
import { GithubOutlined, HeartFilled } from '@ant-design/icons';
|
||||||
|
|
||||||
|
const { Footer: AntFooter } = Layout;
|
||||||
|
|
||||||
|
export const Footer: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<AntFooter
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
background: '#fff',
|
||||||
|
borderTop: '1px solid #F0F0F0',
|
||||||
|
padding: '24px 50px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ color: '#9CA3AF', fontSize: 14 }}>
|
||||||
|
Made with <HeartFilled style={{ color: '#EC4899', margin: '0 4px' }} /> by PicStack Team
|
||||||
|
</div>
|
||||||
|
<div style={{ marginTop: 8, color: '#D1D5DB', fontSize: 12 }}>
|
||||||
|
<a
|
||||||
|
href="https://github.com"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
style={{ color: '#9CA3AF', marginRight: 16, transition: 'color 0.3s' }}
|
||||||
|
onMouseEnter={(e) => e.currentTarget.style.color = '#7C3AED'}
|
||||||
|
onMouseLeave={(e) => e.currentTarget.style.color = '#9CA3AF'}
|
||||||
|
>
|
||||||
|
<GithubOutlined style={{ marginRight: 4 }} />
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
<span>© 2025 PicStack. All rights reserved.</span>
|
||||||
|
</div>
|
||||||
|
</AntFooter>
|
||||||
|
);
|
||||||
|
};
|
||||||
168
src/layouts/MainLayout/Header.tsx
Normal file
168
src/layouts/MainLayout/Header.tsx
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Layout, Space, Badge, Avatar, Dropdown, Menu } from 'antd';
|
||||||
|
import {
|
||||||
|
BellOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
UserOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
|
CloudUploadOutlined,
|
||||||
|
DashboardOutlined,
|
||||||
|
PictureOutlined,
|
||||||
|
LinkOutlined,
|
||||||
|
ToolOutlined,
|
||||||
|
DatabaseOutlined,
|
||||||
|
BarChartOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import { useNavigate, useLocation } from 'react-router-dom';
|
||||||
|
import type { MenuProps } from 'antd';
|
||||||
|
|
||||||
|
const { Header: AntHeader } = Layout;
|
||||||
|
|
||||||
|
export const Header: React.FC = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
// 主导航菜单项
|
||||||
|
const navMenuItems: MenuProps['items'] = [
|
||||||
|
{
|
||||||
|
key: '/dashboard',
|
||||||
|
icon: <DashboardOutlined />,
|
||||||
|
label: '仪表盘',
|
||||||
|
onClick: () => navigate('/dashboard'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/upload',
|
||||||
|
icon: <CloudUploadOutlined />,
|
||||||
|
label: '上传图片',
|
||||||
|
onClick: () => navigate('/upload'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/gallery',
|
||||||
|
icon: <PictureOutlined />,
|
||||||
|
label: '图片库',
|
||||||
|
onClick: () => navigate('/gallery'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/links',
|
||||||
|
icon: <LinkOutlined />,
|
||||||
|
label: '链接管理',
|
||||||
|
onClick: () => navigate('/links'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/tools',
|
||||||
|
icon: <ToolOutlined />,
|
||||||
|
label: '图片工具',
|
||||||
|
onClick: () => navigate('/tools'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/storage',
|
||||||
|
icon: <DatabaseOutlined />,
|
||||||
|
label: '存储配置',
|
||||||
|
onClick: () => navigate('/storage'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/analytics',
|
||||||
|
icon: <BarChartOutlined />,
|
||||||
|
label: '统计分析',
|
||||||
|
onClick: () => navigate('/analytics'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 用户菜单项
|
||||||
|
const userMenuItems: MenuProps['items'] = [
|
||||||
|
{
|
||||||
|
key: 'settings',
|
||||||
|
icon: <SettingOutlined />,
|
||||||
|
label: '设置',
|
||||||
|
onClick: () => navigate('/settings'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'logout',
|
||||||
|
icon: <LogoutOutlined />,
|
||||||
|
label: '退出登录',
|
||||||
|
danger: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 获取当前选中的菜单项
|
||||||
|
const selectedKey = location.pathname === '/' ? '/dashboard' : location.pathname;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AntHeader
|
||||||
|
style={{
|
||||||
|
background: '#fff',
|
||||||
|
padding: '0 24px',
|
||||||
|
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 999,
|
||||||
|
height: 64,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Logo 区域 */}
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 200 }}>
|
||||||
|
<div style={{
|
||||||
|
width: 36,
|
||||||
|
height: 36,
|
||||||
|
borderRadius: 10,
|
||||||
|
background: 'linear-gradient(135deg, #7C3AED 0%, #EC4899 100%)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
boxShadow: '0 4px 12px rgba(124, 58, 237, 0.25)'
|
||||||
|
}}>
|
||||||
|
<CloudUploadOutlined style={{ fontSize: 20, color: '#FFFFFF' }} />
|
||||||
|
</div>
|
||||||
|
<span style={{
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: 700,
|
||||||
|
background: 'linear-gradient(135deg, #7C3AED 0%, #EC4899 100%)',
|
||||||
|
WebkitBackgroundClip: 'text',
|
||||||
|
WebkitTextFillColor: 'transparent',
|
||||||
|
backgroundClip: 'text'
|
||||||
|
}}>
|
||||||
|
PicStack
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 中间导航菜单 */}
|
||||||
|
<div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
|
||||||
|
<Menu
|
||||||
|
mode="horizontal"
|
||||||
|
selectedKeys={[selectedKey]}
|
||||||
|
items={navMenuItems}
|
||||||
|
className="top-nav-menu"
|
||||||
|
style={{
|
||||||
|
border: 'none',
|
||||||
|
background: 'transparent',
|
||||||
|
minWidth: 600,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧操作区 */}
|
||||||
|
<div style={{ minWidth: 200, display: 'flex', justifyContent: 'flex-end' }}>
|
||||||
|
<Space size={20}>
|
||||||
|
{/* 通知 */}
|
||||||
|
<Badge count={3} offset={[-2, 2]}>
|
||||||
|
<BellOutlined style={{ fontSize: 18, cursor: 'pointer' }} />
|
||||||
|
</Badge>
|
||||||
|
|
||||||
|
{/* 用户菜单 */}
|
||||||
|
<Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
|
||||||
|
<div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
|
<Avatar size={32} icon={<UserOutlined />} />
|
||||||
|
<span style={{ fontSize: 14 }}>用户</span>
|
||||||
|
</div>
|
||||||
|
</Dropdown>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</AntHeader>
|
||||||
|
);
|
||||||
|
};
|
||||||
98
src/layouts/MainLayout/Sidebar.tsx
Normal file
98
src/layouts/MainLayout/Sidebar.tsx
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Layout, Menu } from 'antd';
|
||||||
|
import {
|
||||||
|
DashboardOutlined,
|
||||||
|
CloudUploadOutlined,
|
||||||
|
PictureOutlined,
|
||||||
|
LinkOutlined,
|
||||||
|
ToolOutlined,
|
||||||
|
DatabaseOutlined,
|
||||||
|
BarChartOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import { useNavigate, useLocation } from 'react-router-dom';
|
||||||
|
import type { MenuProps } from 'antd';
|
||||||
|
|
||||||
|
const { Sider } = Layout;
|
||||||
|
|
||||||
|
type MenuItem = Required<MenuProps>['items'][number];
|
||||||
|
|
||||||
|
export const Sidebar: React.FC<{ collapsed: boolean }> = ({ collapsed }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const menuItems: MenuItem[] = [
|
||||||
|
{
|
||||||
|
key: '/dashboard',
|
||||||
|
icon: <DashboardOutlined />,
|
||||||
|
label: '仪表盘',
|
||||||
|
onClick: () => navigate('/dashboard'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/upload',
|
||||||
|
icon: <CloudUploadOutlined />,
|
||||||
|
label: '上传图片',
|
||||||
|
onClick: () => navigate('/upload'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/gallery',
|
||||||
|
icon: <PictureOutlined />,
|
||||||
|
label: '图片库',
|
||||||
|
onClick: () => navigate('/gallery'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/links',
|
||||||
|
icon: <LinkOutlined />,
|
||||||
|
label: '链接管理',
|
||||||
|
onClick: () => navigate('/links'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/tools',
|
||||||
|
icon: <ToolOutlined />,
|
||||||
|
label: '图片工具',
|
||||||
|
onClick: () => navigate('/tools'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/storage',
|
||||||
|
icon: <DatabaseOutlined />,
|
||||||
|
label: '存储配置',
|
||||||
|
onClick: () => navigate('/storage'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/analytics',
|
||||||
|
icon: <BarChartOutlined />,
|
||||||
|
label: '统计分析',
|
||||||
|
onClick: () => navigate('/analytics'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/settings',
|
||||||
|
icon: <SettingOutlined />,
|
||||||
|
label: '设置',
|
||||||
|
onClick: () => navigate('/settings'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 获取当前激活的菜单项
|
||||||
|
const selectedKey = location.pathname === '/' ? '/dashboard' : location.pathname;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sider
|
||||||
|
collapsed={collapsed}
|
||||||
|
width={220}
|
||||||
|
style={{
|
||||||
|
background: '#fff',
|
||||||
|
borderRight: '1px solid #F0F0F0',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Menu
|
||||||
|
mode="inline"
|
||||||
|
selectedKeys={[selectedKey]}
|
||||||
|
style={{ height: '100%', borderRight: 0, paddingTop: 16 }}
|
||||||
|
items={menuItems}
|
||||||
|
/>
|
||||||
|
</Sider>
|
||||||
|
);
|
||||||
|
};
|
||||||
26
src/layouts/MainLayout/index.tsx
Normal file
26
src/layouts/MainLayout/index.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Layout } from 'antd';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import { Header } from './Header';
|
||||||
|
import { Footer } from './Footer';
|
||||||
|
|
||||||
|
const { Content } = Layout;
|
||||||
|
|
||||||
|
export const MainLayout: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<Layout style={{ minHeight: '100vh' }}>
|
||||||
|
<Header />
|
||||||
|
<Content
|
||||||
|
style={{
|
||||||
|
padding: 24,
|
||||||
|
margin: 0,
|
||||||
|
minHeight: 280,
|
||||||
|
background: '#F5F7FA',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Outlet />
|
||||||
|
</Content>
|
||||||
|
<Footer />
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user