yml/order_site
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

优化后台侧边导航

Browse Source
This commit is contained in:
yml2213
2026-07-07 19:10:45 +08:00
parent 4fb3dbf76d
commit d11628fe57
2 changed files with 223 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend-react/src/layouts/AdminLayout.tsx
+123 -31
View File
@@ -1,10 +1,16 @@
import {
ApiOutlined,
AuditOutlined,
BellOutlined,
CloudServerOutlined,
DashboardOutlined,
FileSearchOutlined,
LinkOutlined,
LogoutOutlined,
MenuFoldOutlined,
MenuUnfoldOutlined,
OrderedListOutlined,
SafetyCertificateOutlined,
SettingOutlined,
ShopOutlined,
TeamOutlined,
@@ -39,23 +45,71 @@ export default function AdminLayout() {
const expiresAt = getAdminTokenExpiresAt()
const menuItems = useMemo<MenuProps['items']>(() => {
const items: MenuProps['items'] = [
const operationItems: MenuProps['items'] = [
{ key: '/admin/dashboard', icon: <DashboardOutlined />, label: '概览' },
{ key: '/admin/orders', icon: <OrderedListOutlined />, label: '订单' },
{ key: '/admin/tasks', icon: <UnorderedListOutlined />, label: '任务' },
{ key: '/admin/cloudtentacles-records', icon: <FileSearchOutlined />, label: '发货记录' },
]
const items: MenuProps['items'] = [
{
key: 'group-operation',
type: 'group',
label: '运营',
children: operationItems,
},
]
if (role === 'admin') {
items.splice(1, 0, { key: '/admin/users', icon: <TeamOutlined />, label: '用户' })
items.push(
{ key: '/admin/cloudtentacles-records', icon: <FileSearchOutlined />, label: '发货记录' },
{
key: '/admin/platform-shops',
icon: <SettingOutlined />,
label: '平台配置',
key: 'group-config',
type: 'group',
label: '配置',
children: [
{ key: '/admin/users', icon: <TeamOutlined />, label: '后台用户' },
{
key: '/admin/platform-shops',
icon: <SettingOutlined />,
label: '平台配置',
children: [
{
key: '/admin/platform-shops?tab=ninetyone',
icon: <LinkOutlined />,
label: '91卡券',
},
{
key: '/admin/platform-shops?tab=notifications',
icon: <BellOutlined />,
label: '内部通知',
},
{
key: '/admin/platform-shops?tab=kuaishouEticket',
icon: <SafetyCertificateOutlined />,
label: '快手核销',
},
{
key: '/admin/platform-shops?tab=kuaishouFeifei',
icon: <ApiOutlined />,
label: 'feifei',
},
{
key: '/admin/platform-shops?tab=cloudtentacles',
icon: <CloudServerOutlined />,
label: 'cloudtentacles',
},
],
},
{ key: '/admin/platform-fulfillment', icon: <ShopOutlined />, label: '履约配置' },
],
},
{
key: 'group-system',
type: 'group',
label: '系统',
children: [{ key: '/admin/audit-logs', icon: <AuditOutlined />, label: '审计日志' }],
},
{ key: '/admin/platform-fulfillment', icon: <ShopOutlined />, label: '履约配置' },
{ key: '/admin/audit-logs', icon: <AuditOutlined />, label: '审计' },
)
}
@@ -80,7 +134,8 @@ export default function AdminLayout() {
window.localStorage.setItem(SIDEBAR_COLLAPSED_KEY, next ? '1' : '0')
}
const selectedKey = resolveSelectedKey(location.pathname)
const selectedKey = resolveSelectedKey(location.pathname, location.search)
const defaultOpenKeys = collapsed ? [] : resolveDefaultOpenKeys(selectedKey)
return (
<Layout className="admin-shell">
@@ -91,32 +146,57 @@ export default function AdminLayout() {
className="admin-sider"
trigger={null}
>
<div className="admin-brand">
<strong>{collapsed ? 'OS' : '运营后台'}</strong>
{!collapsed ? <span>订单与交付管理</span> : null}
<div className="admin-sider-inner">
<div className="admin-brand">
<div className="admin-brand-copy">
<strong>{collapsed ? 'OS' : '运营后台'}</strong>
{!collapsed ? <span>订单与交付管理</span> : null}
</div>
<Button
className="admin-collapse-button"
aria-label={collapsed ? '展开导航' : '折叠导航'}
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={toggleCollapsed}
/>
</div>
{!collapsed ? (
<div className="admin-sidebar-profile">
<Typography.Text strong>{username}</Typography.Text>
<Typography.Text type="secondary">{roleLabel(role)}</Typography.Text>
{expiresAt ? (
<Typography.Text type="secondary">
{formatAdminDateTime(expiresAt)} 到期
</Typography.Text>
) : null}
</div>
) : null}
<Menu
mode="inline"
inlineIndent={16}
selectedKeys={[selectedKey]}
defaultOpenKeys={defaultOpenKeys}
items={menuItems}
className="admin-menu"
onClick={({ key }) => navigate(String(key))}
/>
<div className="admin-sider-footer">
<Button
block={!collapsed}
icon={<LogoutOutlined />}
onClick={submitLogout}
aria-label="退出登录"
>
{collapsed ? null : '退出登录'}
</Button>
</div>
</div>
<Menu
mode="inline"
selectedKeys={[selectedKey]}
items={menuItems}
onClick={({ key }) => navigate(String(key))}
/>
</Layout.Sider>
<Layout>
<Layout.Header className="admin-topbar">
<Button
aria-label={collapsed ? '展开导航' : '折叠导航'}
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={toggleCollapsed}
/>
<Space className="admin-user" size={12}>
<div className="admin-user-copy">
<Typography.Text strong>{username}</Typography.Text>
<Typography.Text type="secondary">
{roleLabel(role)}
{expiresAt ? ` · ${formatAdminDateTime(expiresAt)} 到期` : ''}
</Typography.Text>
</div>
<Dropdown
menu={{
items: [{ key: 'logout', label: '退出登录' }],
@@ -136,12 +216,24 @@ export default function AdminLayout() {
)
}
function resolveSelectedKey(pathname: string) {
function resolveSelectedKey(pathname: string, search = '') {
if (pathname.startsWith('/admin/orders')) return '/admin/orders'
if (pathname.startsWith('/admin/tasks')) return '/admin/tasks'
if (pathname === '/admin/platform-shops') {
const tab = new URLSearchParams(search).get('tab') || 'ninetyone'
return `/admin/platform-shops?tab=${tab}`
}
return pathname
}
function resolveDefaultOpenKeys(selectedKey: string) {
if (selectedKey.startsWith('/admin/platform-shops')) {
return ['/admin/platform-shops']
}
return []
}
function roleLabel(role: string) {
if (role === 'admin') return '管理员'
if (role === 'operator') return '普通运营'
apps/frontend-react/src/styles/main.css
+100 -5
View File
@@ -64,14 +64,33 @@ select {
z-index: 2;
}
.admin-sider .ant-layout-sider-children {
height: 100%;
}
.admin-sider-inner {
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
.admin-brand {
height: 64px;
display: grid;
align-content: center;
padding: 0 20px;
min-height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px 12px 18px;
border-bottom: 1px solid #edf0f5;
}
.admin-brand-copy {
min-width: 0;
display: grid;
line-height: 1.25;
}
.admin-brand strong {
color: #111827;
font-size: 18px;
@@ -82,11 +101,87 @@ select {
font-size: 12px;
}
.admin-collapse-button {
flex: 0 0 auto;
border-color: #e5e7eb;
}
.admin-sidebar-profile {
margin: 12px 14px 8px;
padding: 12px;
border: 1px solid #edf0f5;
border-radius: 6px;
background: #f8fafc;
display: grid;
gap: 3px;
line-height: 1.35;
}
.admin-sidebar-profile .ant-typography {
margin: 0;
font-size: 12px;
}
.admin-menu {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
border-inline-end: 0 !important;
padding: 6px 8px 10px;
}
.admin-menu .ant-menu-item,
.admin-menu .ant-menu-submenu-title {
border-radius: 6px;
margin-inline: 0;
width: 100%;
}
.admin-menu .ant-menu-item-selected {
font-weight: 700;
}
.admin-menu .ant-menu-item-group-title {
padding: 12px 10px 6px;
color: #9ca3af;
font-size: 12px;
font-weight: 700;
}
.admin-sider-footer {
padding: 10px 14px 14px;
border-top: 1px solid #edf0f5;
}
.admin-sider.ant-layout-sider-collapsed .admin-brand {
padding: 12px 8px;
flex-direction: column;
}
.admin-sider.ant-layout-sider-collapsed .admin-brand-copy {
justify-items: center;
}
.admin-sider.ant-layout-sider-collapsed .admin-menu {
padding-inline: 6px;
}
.admin-sider.ant-layout-sider-collapsed .admin-menu .ant-menu-item-group-title {
padding: 8px 0;
height: 8px;
overflow: hidden;
}
.admin-sider.ant-layout-sider-collapsed .admin-sider-footer {
padding-inline: 8px;
}
.admin-topbar {
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
padding: 0 20px;
border-bottom: 1px solid #edf0f5;
}