138 lines
4.9 KiB
TypeScript
138 lines
4.9 KiB
TypeScript
import { Badge, Button, Dropdown, Layout, Space, Typography } from 'antd'
|
|
import { Link, Outlet, useNavigate } from 'react-router-dom'
|
|
import { UserOutlined } from '@ant-design/icons'
|
|
|
|
import { BrandLogo } from '@/components/BrandLogo'
|
|
import { useChatUnreadCount } from '@/features/messages/api'
|
|
import { useSessionStore } from '@/stores/session'
|
|
|
|
const { Header, Content, Footer } = Layout
|
|
|
|
export function StorefrontLayout() {
|
|
const navigate = useNavigate()
|
|
const user = useSessionStore(state => state.user)
|
|
const logout = useSessionStore(state => state.logout)
|
|
const unreadMessages = useChatUnreadCount(Boolean(user)).data ?? 0
|
|
|
|
return (
|
|
<Layout className="site-shell">
|
|
<Header className="site-header">
|
|
<div className="site-header__inner">
|
|
<Link to="/" className="site-brand" aria-label="解忧商行首页">
|
|
<BrandLogo height={42} />
|
|
</Link>
|
|
|
|
<nav className="site-nav" aria-label="主导航">
|
|
<Link to="/">首页</Link>
|
|
<a href="/#listings">商品</a>
|
|
<Link to="/orders">我的订单</Link>
|
|
<Link to="/messages">
|
|
<Badge count={unreadMessages} size="small" offset={[8, -2]}>
|
|
<span>消息</span>
|
|
</Badge>
|
|
</Link>
|
|
<Link to="/seller/listings">卖家中心</Link>
|
|
<Link to="/crash">摸红商城</Link>
|
|
<Link to="/announcements">公告</Link>
|
|
<a href="/#process">流程</a>
|
|
<a href="/#rules">规则</a>
|
|
</nav>
|
|
|
|
<Space size={12}>
|
|
{user ? (
|
|
<Dropdown
|
|
menu={{
|
|
items: [
|
|
{ key: 'phone', label: `已登录：${user.phone}`, disabled: true },
|
|
{
|
|
key: 'orders',
|
|
label: '我的订单',
|
|
onClick: () => navigate('/orders'),
|
|
},
|
|
{
|
|
key: 'messages',
|
|
label: '我的消息',
|
|
onClick: () => navigate('/messages'),
|
|
},
|
|
{
|
|
key: 'notifications',
|
|
label: '我的通知',
|
|
onClick: () => navigate('/notifications'),
|
|
},
|
|
{
|
|
key: 'invitations',
|
|
label: '邀请好友',
|
|
onClick: () => navigate('/invitations'),
|
|
},
|
|
{
|
|
key: 'announcements',
|
|
label: '公告中心',
|
|
onClick: () => navigate('/announcements'),
|
|
},
|
|
{
|
|
key: 'wallet',
|
|
label: '我的钱包',
|
|
onClick: () => navigate('/wallet'),
|
|
},
|
|
{
|
|
key: 'seller-earnings',
|
|
label: '卖家收益',
|
|
onClick: () => navigate('/seller/earnings'),
|
|
},
|
|
{
|
|
key: 'seller-handoffs',
|
|
label: '号主待办',
|
|
onClick: () => navigate('/seller/handoffs'),
|
|
},
|
|
{
|
|
key: 'seller-pickups',
|
|
label: '线下提号',
|
|
onClick: () => navigate('/seller/pickups'),
|
|
},
|
|
{
|
|
key: 'seller',
|
|
label: '卖家中心',
|
|
onClick: () => navigate('/seller/listings'),
|
|
},
|
|
{
|
|
key: 'logout',
|
|
label: '退出登录',
|
|
onClick: async () => {
|
|
await logout()
|
|
navigate('/')
|
|
},
|
|
},
|
|
],
|
|
}}
|
|
>
|
|
<Button icon={<UserOutlined />}>{user.nickname || '我的商行'}</Button>
|
|
</Dropdown>
|
|
) : (
|
|
<Button type="primary" onClick={() => navigate('/login')}>
|
|
登录 / 注册
|
|
</Button>
|
|
)}
|
|
</Space>
|
|
</div>
|
|
</Header>
|
|
|
|
<Content className="site-content">
|
|
<Outlet />
|
|
</Content>
|
|
|
|
<Footer className="site-footer">
|
|
<div className="site-footer__inner">
|
|
<div>
|
|
<Typography.Text strong>解忧商行</Typography.Text>
|
|
<Typography.Text type="secondary"> · JIEYOU TRADING HOUSE</Typography.Text>
|
|
<div className="site-footer__muted">租得明白，还得安心。</div>
|
|
</div>
|
|
<div className="site-footer__muted">
|
|
© 2026 解忧商行 · 备案信息与客服信息待配置
|
|
</div>
|
|
</div>
|
|
</Footer>
|
|
</Layout>
|
|
)
|
|
}
|