调整前后台导航样式
This commit is contained in:
@@ -49,7 +49,6 @@ const AdminLayout: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { user, loading, logout } = useAdminStore();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [menuItems, setMenuItems] = useState<any[]>([]);
|
||||
const [pwdModal, setPwdModal] = useState(false);
|
||||
const [pwdForm] = Form.useForm();
|
||||
@@ -204,42 +203,61 @@ const AdminLayout: React.FC = () => {
|
||||
});
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Layout style={{ minHeight: '100vh', background: '#f1f5f9' }}>
|
||||
<Sider
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
onCollapse={setCollapsed}
|
||||
width={220}
|
||||
width={240}
|
||||
theme="light"
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRight: '1px solid #e5e7eb',
|
||||
position: 'fixed',
|
||||
left: 16,
|
||||
top: 16,
|
||||
bottom: 16,
|
||||
width: 240,
|
||||
background: 'linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)',
|
||||
borderRadius: '20px',
|
||||
boxShadow: '0 4px 32px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.06)',
|
||||
zIndex: 100,
|
||||
}}
|
||||
>
|
||||
{/* Logo */}
|
||||
<div style={{
|
||||
height: 64, display: 'flex', alignItems: 'center',
|
||||
justifyContent: 'center', gap: 10,
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
height: 80,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 12,
|
||||
background: 'linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%)',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 32, height: 32, borderRadius: 8,
|
||||
background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
boxShadow: '0 2px 8px rgba(99,102,241,0.3)',
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 14,
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 4px 16px rgba(99, 102, 241, 0.35)',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{siteLogo ? (
|
||||
<img src={siteLogo} alt="logo" style={{ width: 24, height: 24, objectFit: 'contain' }} />
|
||||
<img src={siteLogo} alt="logo" style={{ width: 28, height: 28, objectFit: 'contain' }} />
|
||||
) : (
|
||||
<ThunderboltOutlined style={{ fontSize: 16, color: '#fff' }} />
|
||||
<ThunderboltOutlined style={{ fontSize: 20, color: '#ffffff' }} />
|
||||
)}
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<span style={{ color: '#1f2937', fontSize: 15, fontWeight: 600, letterSpacing: -0.02 }}>
|
||||
<span style={{
|
||||
color: '#1e293b',
|
||||
fontSize: 17,
|
||||
fontWeight: 700,
|
||||
letterSpacing: -0.02,
|
||||
background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text',
|
||||
}}>
|
||||
{siteName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Menu */}
|
||||
@@ -263,15 +281,26 @@ const AdminLayout: React.FC = () => {
|
||||
|
||||
</Sider>
|
||||
|
||||
<Layout>
|
||||
<Layout style={{ marginLeft: 272, marginTop: 16, marginRight: 16, marginBottom: 16, background: 'transparent' }}>
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
height: 56, background: '#fff', borderBottom: '1px solid #f0f0f5',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
padding: '0 24px',
|
||||
height: 72,
|
||||
background: '#ffffff',
|
||||
borderRadius: '16px 16px 0 0',
|
||||
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.04)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 32px',
|
||||
fontFamily: 'var(--font-sans)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.06)',
|
||||
borderBottom: 'none',
|
||||
}}>
|
||||
<Typography.Text strong style={{ fontSize: 16 }}>
|
||||
<Typography.Text strong style={{
|
||||
fontSize: 18,
|
||||
color: '#1e293b',
|
||||
fontWeight: 600,
|
||||
}}>
|
||||
{antMenuItems.find(m => m.key === activeKey)?.label
|
||||
|| antMenuItems.flatMap(m => m.children || []).find((c: any) => c.key === activeKey)?.label
|
||||
|| '管理后台'}
|
||||
@@ -288,10 +317,31 @@ const AdminLayout: React.FC = () => {
|
||||
if (key === 'changePwd') { setPwdModal(true); pwdForm.resetFields(); }
|
||||
},
|
||||
}} placement="bottomRight" arrow>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', padding: '4px 8px', borderRadius: 8, transition: 'background 0.2s' }}>
|
||||
<Avatar size={28} icon={<UserOutlined />}
|
||||
style={{ background: 'linear-gradient(135deg, #6366f1, #8b5cf6)' }} />
|
||||
<Typography.Text style={{ fontSize: 13, fontWeight: 500 }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
cursor: 'pointer',
|
||||
padding: '8px 12px',
|
||||
borderRadius: 12,
|
||||
transition: 'all 0.25s ease',
|
||||
background: 'linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = '#ffffff';
|
||||
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.08)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<Avatar size={32} icon={<UserOutlined />}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)',
|
||||
}} />
|
||||
<Typography.Text style={{ fontSize: 14, fontWeight: 600, color: '#1e293b' }}>
|
||||
{user?.username}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
@@ -299,7 +349,15 @@ const AdminLayout: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<Content style={{ padding: 24, background: '#f5f6fa', overflow: 'auto' }}>
|
||||
<Content style={{
|
||||
padding: 32,
|
||||
background: '#ffffff',
|
||||
borderRadius: '0 0 16px 16px',
|
||||
boxShadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
|
||||
overflow: 'auto',
|
||||
border: '1px solid rgba(0, 0, 0, 0.06)',
|
||||
borderTop: 'none',
|
||||
}}>
|
||||
{antMenuItems.length === 0 && !isAdminUser ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '60vh', color: '#94a3b8' }}>
|
||||
<LockOutlined style={{ fontSize: 48, marginBottom: 16, color: '#cbd5e1' }} />
|
||||
|
||||
Reference in New Issue
Block a user