95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import {
|
|
ContainerOutlined,
|
|
LogoutOutlined,
|
|
ShoppingOutlined,
|
|
UserOutlined,
|
|
} from '@ant-design/icons'
|
|
import { App, Button, Layout, Menu, Space, Typography } from 'antd'
|
|
import type { MenuProps } from 'antd'
|
|
import { Outlet, useLocation, useNavigate } from 'react-router'
|
|
|
|
import { logoutWorker } from '@/services/worker'
|
|
import { clearWorkerSession, getWorkerStatus, getWorkerUsername } from '@/utils/worker-auth'
|
|
|
|
const menuItems: MenuProps['items'] = [
|
|
{ key: '/worker/hall', icon: <ShoppingOutlined />, label: '抢单大厅' },
|
|
{ key: '/worker/orders', icon: <ContainerOutlined />, label: '我的订单' },
|
|
{ key: '/worker/profile', icon: <UserOutlined />, label: '个人中心' },
|
|
]
|
|
|
|
export default function WorkerLayout() {
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const { message } = App.useApp()
|
|
const username = getWorkerUsername() || '打手'
|
|
const status = getWorkerStatus()
|
|
|
|
async function submitLogout() {
|
|
try {
|
|
await logoutWorker()
|
|
} catch {
|
|
// 接单端退出为无状态操作，本地清理优先。
|
|
} finally {
|
|
clearWorkerSession()
|
|
message.success('已退出登录')
|
|
navigate('/worker/login', { replace: true })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Layout className="admin-shell worker-shell">
|
|
<Layout.Sider width={220} className="admin-sider" trigger={null}>
|
|
<div className="admin-sider-inner">
|
|
<div className="admin-brand">
|
|
<div className="admin-brand-copy">
|
|
<strong>王大锤</strong>
|
|
<span>接单平台</span>
|
|
</div>
|
|
</div>
|
|
<div className="admin-sidebar-profile">
|
|
<Typography.Text strong>{username}</Typography.Text>
|
|
<Typography.Text type="secondary">{formatWorkerStatus(status)}</Typography.Text>
|
|
</div>
|
|
<Menu
|
|
mode="inline"
|
|
inlineIndent={16}
|
|
selectedKeys={[resolveSelectedKey(location.pathname)]}
|
|
items={menuItems}
|
|
className="admin-menu"
|
|
onClick={({ key }) => navigate(String(key))}
|
|
/>
|
|
<div className="admin-sider-footer">
|
|
<Button block icon={<LogoutOutlined />} onClick={submitLogout}>
|
|
退出登录
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Layout.Sider>
|
|
<Layout className="admin-main-shell">
|
|
<Layout.Header className="admin-topbar">
|
|
<Space className="admin-user" size={12}>
|
|
<Typography.Text type="secondary">{formatWorkerStatus(status)}</Typography.Text>
|
|
</Space>
|
|
</Layout.Header>
|
|
<Layout.Content className="admin-content">
|
|
<Outlet />
|
|
</Layout.Content>
|
|
</Layout>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
function resolveSelectedKey(pathname: string) {
|
|
if (pathname.startsWith('/worker/orders')) return '/worker/orders'
|
|
if (pathname.startsWith('/worker/profile')) return '/worker/profile'
|
|
return '/worker/hall'
|
|
}
|
|
|
|
function formatWorkerStatus(status: string) {
|
|
if (status === 'active') return '已审核'
|
|
if (status === 'pending_review') return '待审核'
|
|
if (status === 'rejected') return '审核未通过'
|
|
if (status === 'disabled') return '已停用'
|
|
return '未登录'
|
|
}
|