77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import { 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 { 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)
|
|
|
|
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>
|
|
<a href="#process">流程</a>
|
|
<a href="#rules">规则</a>
|
|
</nav>
|
|
|
|
<Space size={12}>
|
|
{user ? (
|
|
<Dropdown
|
|
menu={{
|
|
items: [
|
|
{ key: 'phone', label: `已登录：${user.phone}`, disabled: true },
|
|
{
|
|
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>
|
|
)
|
|
}
|